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998 年 ， 可 用 性 专家 Rolf Molich “分 别 给 9 个 团队 3 周 的 时 间 对 Web 邮 
48 www.hotmail.com 进行 评估 。 该 实验 是 被 他 称 为 CUE (Comparative 
Usability Evaluations， 相 对 可 用 性 测试 ) 系列 实验 ”的 一 部 分 ， 试 图 建立 起 一 套 
切实 可 行 的 可 用 性 测试 标准 。 在 每 一 项 测试 中 ，Rolf 都 会 请 多 个 可 用 性 团队 对 
同一 个 设计 进行 自由 评估 。 


这 次 测试 被 称 为 CUE-2， 因 为 它 是 该 系列 实验 中 的 第 二 项 测试 。 在 各 团队 
记录 下 的 结果 中 ， 反 映 出 一 个 令 人 惊 座 的 趋势 。 


尽管 可 用 性 专家 们 在 检测 界面 问题 时 宣称 使 用 的 方法 非常 科学 ， 但 是 可 用 
性 评估 本 身 却 “ 并 不 十 分 科学 ”。 


(D Rolf Molich 于 1984 年 投身 于 可 用 性 方面 的 研究 ，1993 年 在 丹麦 创立 了 可 用 性 咨询 公司 
DialogDesign。 他 同时 也 在 Nielsen Norman Group (由 Donald Norman, Jakob Nielsen 和 
Bruce Tognazzini 三 位 著名 用 户 体验 专家 创办 的 可 用 性 咨询 公司 ) 的 大 型 可 用 性 测试 项 目 

中 担任 首席 研究 员 。Rolf Molich 也 是 “启发 式 评估 法 ”的 发 明 人 之 一 ( 男 一 位 发 明 人 是 

Jakob Nielsen), #4 User Friendly Computer Systems (《 用 户 友 好 的 计算 机 系统 》) 一 

书 ， 英 文 版 本 名 为 Usable Web Desigen(《 易 用 网 页 的 设计 》)。 一 一 译 者 注 (以 下 未 特别 说 

明 的 均 为 译 者 注 ) 

O 该 实验 包含 了 7 项 研究 案例 (CUE-1 至 CUE-7)， 聘 请 了 60 多 个 专业 可 用 性 团队 为 同一 个 
应 用 程序 进行 测试 或 评估 。 
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在 一 次 接受 Christine Perfetti ^ (她 当时 还 在 Jared 的 公司 User Interface 
Engineering “E UIE) 的 采访 时 ，Rolf 谈 起 了 自己 的 评估 ， 说 道 : 


CUE-2 的 各 团队 总 共 提 交 了 310 个 不 同 的 可 用 性 问题 。 提 到 次 数 最 多 的 
问题 有 7 个 团队 提交 。 只 有 6 个 问题 被 超过 半数 的 团队 提交 ， 而 有 232 个 
问题 (75%) 只 被 提交 了 一 次 。 许 多 标记 为 “严重 ”的 问题 都 只 有 一 个 团 
队 提交 。 即 使 是 那些 所 有 团队 都 测试 过 的 常见 任务 ， 得 到 的 结果 也 完全 不 
同一 一 这 些 任 务 中 有 70% 左右 的 发 现 都 是 唯一 的 。 


在 2003 年 进行 的 CUE-4 (参见 http://www.dialogdesign.dk/Summary3.htm ) 
h, A 17 个 团队 被 聘请 对 www.hotelpenn.com ”进行 评估 ， 该 网 站 有 一 个 基 
于 Flash 的 酒店 客房 预定 系统 ， 由 iHotelier 开发 ”。 在 这 17 个 团队 中 ，9 个 进行 
可 用 性 测试 ， 其 余 的 8 个 进行 专家 评审 。 

所 有 团队 共 提 交 了 340 个 可 用 性 问题 。 然 而 ， 这 些 问 题 中 只 有 9 个 被 超过 
半数 的 团队 提交 。 而 且 共 有 205 个 问题 〈 占 提交 结果 的 60%) 只 被 发 现 过 一 次 ， 
其 中 又 有 61 个 被 标记 为 “严重 ”或 者 “极为 严重 ”的 问题 。 


思考 一 下 。 


为 了 在 评估 过 程 中 发 现 所 有 “严重 ”的 可 用 性 问题 ，Hotmail 项 目 聘请 了 9 
个 可 用 性 团队 。 而 在 CUE-4 中 ， 为 了 找 出 所 有 61 个 严重 问题 ，Hotel Penn 则 需 
要 聘请 17 个 可 用 性 团队 。17 个 啊 ! 


在 被 问 到 开发 团队 如 何 确信 已 经 准确 标识 出 网 站 中 存在 的 问题 时 ，Rolf 总 


结 道 : 


| 很 简单 : 他 们 根本 没 法 确定 ! 


那么 在 今后 创建 可 用 性 网 站 的 过 程 中 ， 可 用 性 测试 是 否 仍 将 扮演 重要 角 
色 ? Rolf 继续 解释 道 : 


(D Christine Perfetti 是 一 位 颇 受 欢迎 的 讲师 和 技术 指导 ， 经 常 出 席 世界 各 地 的 会 议 并 且 是 最 受 
欢迎 的 发 言 人 之 一 。 她 曾 任 UIE 公司 副 总 裁 兼 行政 董事 ， 后 自己 创办 Perfetti Media. 
© User Interface Engineering (用户 界面 工程 ) 是 一 家 专注 于 网 站 和 产品 可 用 性 方面 的 咨询 培 
训 公 司 ， 由 资深 用 户 体验 专家 Jared M. Spool (也 就 是 本 书 的 第 二 作者 ) 于 1988 年 创立 。 
公司 网 站 是 http://www.uie.com/。 
© www.hotelpenn.com 是 宾夕法尼亚 酒店 的 网 站 。 宾 夕 法 尼 亚 酒 店 是 世界 上 最 著名 的 酒店 
一 ， 总 部 位 于 纽约 曼哈顿 核心 区 。 
® iHotelier 现 已 更 名 为 TravelCLICK。 这 家 1989 年 创立 的 公司 专 为 宾馆 及 酒店 提供 一 站 式 电子 
商务 解决 方案 ， 在 全 球 140 多 个 国家 拥有 15000 多 位 客户 。 网 址 为 http://www.travelclick.net/。 
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SAD 应 该 主要 在 项 目的 中 期 阶段 使 用 它们 ， 以 此 来 增进 同事 间 的 信任 。 
然后 应 采取 其 他 更 合算 且 有 效 的 预防 措施 ， 例 如 为 界面 进行 高 可 用 性 的 模 
块 化 分 组 ， 以 成 熟 的 标准 和 准则 为 基础 进行 评审 ， 以 及 情境 式 调查 ”。 


我 们 认为 Rolf 的 回答 并 不 完整 。 首 先 ， 为 了 判断 你 是 否 在 解决 最 重要 的 问 
题 一 一 解决 这 些 问 题 可 以 让 我 们 获得 最 大 的 收益 ， 可 用 性 测试 也 许 并 不 比 一 位 
专家 或 者 一 位 评估 人 员 执 行 的 启发 式 评估 来 得 更 为 准确 或 可 靠 ， 但 可 用 性 测试 
可 以 而 且 确 实 已 经 为 我 们 理解 人 们 的 网 络 交互 行为 提供 了 巨大 的 帮助 ， 它 仍然 
应 当 被 视 为 一 种 必 不 可 少 的 工具 。 


其 次 ， 任 何 评估 或 观测 的 方法 都 应 当 被 放 在 上 下 文 情 境 中 分 析 .。“ 页 面 浏览 
量 ” 和 “平均 页 面 花费 时 间 ” 这 两 个 指标 都 曾经 被 视 为 判断 网 站 效率 高 低 的 衡 
量 标准 ， 但 它们 必须 结合 被 访问 页 面 自身 的 目标 来 考虑 ， 否 则 就 毫 无 意义 。 一 
个 用 户 访问 了 一 系列 的 页 面 ， 这 种 举动 是 因为 任务 流程 很 有 效 呢 ， 还 是 因为 他 
根本 找 不 到 想 要 的 内 容 ? 用 户 在 某 个 页 面 上 花费 了 大 量 的 时 间 ， 是 因为 他 们 很 
感 兴 趣 呢 ， 还 是 因为 遇 到 了 困难 ? NYTimes.com (纽约 时 报 的 网 站 ) 无 疑 希 
望 读者 能 在 网 页 上 逗留 足够 长 的 时 间 ， 阅 读 整 篇 文章 或 者 浏览 所 有 的 标题 ， 但 
Google 的 目标 却 是 让 用 户 能 在 搜索 页 面 中 尽快 找到 需要 的 内 容 ， 然 后 绝 侍 而 
去 。 较 长 的 “花费 时 间 ” 在 NYTimes.com 上 可 能 预示 着 一 篇 高 质量 的 文章 ， 而 
在 Google.com 上 却 可 能 预示 着 开发 团队 一 次 重大 的 失误 。 


不 管 怎 样 ， 可 用 性 评 佑 无 法 告诉 设计 师 怎 样 才能 做 出 好 的 设计 ， 它 只 能 帮 


助 我 们 发 现 已 有 设计 中 存在 的 问题 。 从 这 一 点 来 看 ， 下 面 这 段 Rolf 的 陈述 颇 能 
引起 我 们 的 共鸣 : 


我 希望 有 一 天 我 们 能 拥有 庞大 的 资源 库 ， 里 面 存 放 着 经 过 现实 用 户 的 周详 
测试 而 且 证 明 可 用 的 通用 界面 模块 (building block)。 我 还 希望 我 们 能 向 大 
家 展示 ， 由 可 用 性 专家 把 这 些 模块 组 装 成 完全 成 熟 的 网 站 ， 从 而 高 效 地 生 
产 出 大 量具 有 极 高 可 用 性 的 网 站 。 


O 情境 式 调查 (Contextual Inquiry) 是 一 种 以 用 户 为 中 心 的 设计 方法 〈User-Centered Design, 
UCD)。 它 要 求 研究 者 在 自然 情境 下 旁观 研究 对 象 的 实际 工作 ， 并 记录 下 详细 的 信息 。 在 该 
过 程 中 ， 研 究 者 应 避免 影响 到 研究 对 象 的 日 常 工作 环境 。 研 究 者 试图 通过 这 种 观察 和 讨论 
帮助 他 们 设计 出 能 协助 、 缩 短 甚 至 削减 用 户 工作 流程 的 产品 。 

O 启发 式 评估 法 (Heuristic Evaluation Method) 的 发 明 人 正 是 Rolf Molich 和 Jakob Nielsen. 

它 是 一 种 “打折 ”的 可 用 性 观测 方法 ， 用 于 在 计算 机 软件 中 标识 用 户 界 面 设 计 方 面 的 问题 。 

观测 者 依据 已 经 过 证 实 的 可 用 性 原则 (启发 式 方法 ) 对 界面 执行 的 交互 进行 评估 。 这 种 评 

佑 方式 如 今 被 广泛 应 用 于 新 媒体 领域 ， 尤 其 适用 于 需要 在 短期 内 设计 出 用 户 界面 ， 或 者 由 

于 预算 金额 的 限制 无 法 进行 其 他 界面 测试 的 情况 。 
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庞大 的 资源 库 。 界 面 模块 。 周 详 的 测试 。 

如 果 你 正在 疑惑 Rolf 的 故事 和 手中 的 这 本 书 有 什么 关系 ， 上 面 这 三 个 词 已 
经 包含 了 答案 。 这 是 一 本 关于 模块 的 书 。 这 里 没有 原理 ， 没 有 概念 ， 没 有 代码 ， 
只 有 模块 。 


本 书 的 第 一 个 目标 是 近 距 离 地 观摩 这 些 界 面 模块 一 一 认 出 它们 ， 剥 离 它 们 ， 
分 析 它 们 的 功能 以 及 工作 原理 。 只 有 通过 这 些 ， 吴 为 设计 师 的 我 们 才能 将 它们 
“组 装 成 完全 成 熟 的 网 站 ”并 且 创造 出 “ 极 高 可 用 性 ” 


但 这 只 是 第 一 步 ， 我 们 还 有 其 他 的 一 些 目标 。 准 确 地 说 ， 我 们 和 希望 本 书 能 
够 解决 在 每 个 Web 项 目 中 都 反复 出 现 的 三 种 问题 。 


首先 ， 我 们 对 一 个 应 用 程序 目标 的 理解 是 高 层面 的 ， 而 要 想 把 它 转化 为 低 
层面 的 设计 细节 ， 这 个 过 程 可 能 会 非常 艰难 。 这 就 好 像 拿 走 你 的 魔杖 ， 绑 住 一 
只 手 ， 然 后 要 你 把 蒸汽 变 成 石头 一 样 。 在 整个 过 程 中 ， 弄 明白 从 哪里 开始 可 能 
是 最 困难 的 一 步 ， 而 即使 你 认为 一 切 都 已 搞定 ， 也 很 难 确保 不 会 有 任何 遗漏 。 
当 你 忙 着 迎合 业务 目标 的 时 候 ， 又 如 何 能 保证 自己 完全 满足 了 用 户 的 需求 呢 ? 


其 次 是 标准 与 创新 的 问题 。 在 绝 大 多 数 情 况 下 ， 标 准 就 意味 着 无 趣 。 我 们 
也 许 都 会 同意 ， 在 设计 项 目 中 最 大 快 人 心 的 部 分 就 是 凭空 创造 出 一 个 前 人 尚未 
想到 的 解决 办 法 。 这 种 时 刻 非 常 令 人 兴 心 如 撞 鹿 、 凤 上 腺 素 急 速 上 升 。 
但 是 大 部 分 项 目 中 ， 这 种 情况 非常 罕见 。 这 是 因为 ， 即 使 是 最 具 创新 精神 的 项 
目 ， 能 称 得 上 “前 所 未 见 ” 的 地 方 可 能 也 只 占 整个 项 目的 20%， 其 余 都 是 基于 
标准 的 支撑 功能 。 这 些 工 作 不 会 让 我 们 心 如 撞 鹿 、 肾 上 腺 素 急速 上 升 一 一 它们 
只 是 “苦力 活 ”， 是 每 个 项 目 都 必须 要 做 的 一 部 分 。 也 正 因为 如 此 ， 我 们 往往 不 
太 重 视 它们 。 


比如 说 ， 此 刻 某 个 团队 正在 创建 一 个 新 的 设计 ， 里 面包 含 了 某 些 令 人 惊叹 、 
前 所 未 见 的 功能 。 但 要 想 运 用 这 些 突破 性 的 成 果 ， 用 户 需 要 先 注册 并 登录 。 


注册 功能 并 不 新 颖 ， 并 不 会 让 人 激动 ， 对 开发 也 没有 太 多 挑战 。 但 是 无 数 
团队 都 不 得 不 一 而 再 、 再 而 三 地 设计 这 个 功能 ， 就 好 像 之 前 从 未 创建 过 一 样 。 
这 使 得 设计 “注册 ”的 工作 非常 枯燥 乏味 ， 但 是 忽视 它 却 会 给 开发 者 带 来 很 大 
的 麻烦 。 因 为 它 不 是 项 目 中 最 “ 帅 ” 的 部 分 ， 所 以 往往 得 不 到 重视 ， 结 果 却 可 
能 给 用 户 带 来 难以 使 用 的 挫折 体验 ， 其 至 造成 公司 在 收入 上 的 损失 。 


而 另 一 方面 ， 创 新 也 可 能 会 产生 问题 。 如 果 你 已 经 致力 于 可 用 性 界面 设计 
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一 段 时 间 了 ， 你 可 能 会 和 我 们 注意 到 同样 的 事情 : AT AE A E AY SA o 
酷 和 萄 用 有 时 候 是 一 对 欢喜 多 家 。 


Live.com 在 它 首 次 发 布 的 时 候 就 遇 到 了 这 种 麻烦 ， 其 中 使 用 了 一 种 有 争议 
的 无 限 滚动 设计 模式 。 开 发 者 的 本 意 是 ， 如 果 用 户 和 希望 查看 更 多 搜索 结果 ， 这 
个 方案 将 为 他 们 省 去 被 迫 翻 页 、 等 待 载 人 新 页 面 的 麻烦 ， 而 可 以 直接 在 单个 页 
面 中 即时 载 人 后 续 的 搜索 结果 ， 这 样 当 用 户 往 下 深 动 页 面 时 就 能 随时 看 到 新 的 
内 容 。 然 而 ， 实 际 的 结果 并 不 如 人 所 愿 。 用 户 们 并 不 熟悉 这 一 变化 ， 因 此 当 他 
们 发 现 这 个 页 面 似乎 永远 也 拉 不 到 头 时 ， 很 容易 就 会 产生 挫折 感 ， 而 且 很 快 就 
会 厌恶 这 一 创意 。 一 句 话 ， 他 们 觉得 它 的 表现 不 像 Google。 无 限 长 的 页 面 滚动 
可 能 确实 很 酷 ， 但 是 它 对 用 户 来 说 太 莫 名 其 妙 ， 因 此 完全 没有 达到 预期 的 效 
R^. (第 4 章 详细 讲述 了 这 个 故事 。) 


每 个 人 都 渴望 自己 的 产品 能 在 市 场 上 引起 胡 动 ， 这 需要 我 们 创造 出 光芒 四 
射 的 界面 ， 但 不 能 因此 而 牺牲 可 用 性 。 要 想 做 好 这 一 点 可 能 非常 困难 。 当 我 们 
打破 陈规 时 ， 实 际 上 是 在 冒险 ， 因 为 很 可 能 用 户 根本 无 法 理解 我 们 设计 出 的 界 
面 。 框 架 体 系 为 我 们 提供 了 一 种 方法 ， 把 无 趣 的 支撑 功能 进行 标准 化 ， 这 样 就 
能 避免 重复 开发 ， 从 而 有 更 多 的 时 间 进 行 真正 的 发 明 创 造 。 


最 后 是 “ 低 成 本 、 高 回报 ”的 问题 。Web 开发 的 团队 越 来 越 精简 (很 多 团 
队 的 规模 都 只 有 10 年 前 的 一 半 )， 但 公司 对 每 个 团队 的 期 望 却 越 来 越 多 。 与 此 
同时 ， 项 目 也 变 得 比 以 往 更 为 精密 和 人 复杂。 为 了 节省 时 间 和 精力 ， 开 发 团队 必 
须 开 始 考虑 使 用 以 前 曾经 完成 过 的 功能 。 就 像 我 们 之 前 所 说 的 ， 开 发 者 不 得 不 
反复 设计 注册 功能 ， 就 好 像 之 前 从 未 曾 创建 过 一 样 。 它 确实 被 创建 过 《全 世界 
的 开发 者 都 在 往 目 己 的 产品 里 添加 注册 功能 ， 佑 计 已 经 不 下 数 百 万 次 了 )， 但 尽 
管 它 就 在 那里 ， 却 仍然 要 从 头 再 来 一 遍 。 所 有 这 些 重 复 创 造 、 重 复 开 发 的 工作 
导致 效率 极为 低下 。 为 了 降低 在 这 方面 耗费 的 精力 〈 并 且 给 刺激 、 有 趣 的 创新 
部 分 留 下 更 充裕 的 时 间 )， 开 发 团队 需要 可 重复 利用 的 设计 。 


重用 是 如 今 最 应 该 优先 考虑 的 事 。 


Q Live.com 本 是 Windows Live Personalized Experience ( Windows Live 个 性 化 体验 ) 的 用 户 自 
定义 门户 ， 由 微软 于 2005 年 11 月 发 布 。 它 是 最 初 发 布 的 Windows Live 服务 之 一 。 但 是 随 
着 微软 的 战略 调整 ，Live.com 被 My.Live.com 所 取代 ， 而 原来 的 域名 Live.com 则 指向 了 搜 
RIVZ Bing (取代 了 之 前 的 Live Search)。 因 此 ， 作 者 文中 所 提 到 的 Live.com 实际 上 指 的 
是 2009 年 6 月 首次 发 布 的 Bing。 

O Wi Bing 图 片 搜索 仍然 采用 了 无 限 深 动 的 交互 方式 。 不 过 所 谓 的 “无 限 深 动 ”仍然 是 有 
限 的 : 无 论 搜 索 到 多 少 结果 ，Bing 最 多 显示 前 1 000 个 ， 而 且 不 提供 翻 页 功能 。 
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1.1 可 重用 策略 


要 想 解决 我 们 之 前 所 述 的 所 有 问题 ， 核 心理 念 其 实 非 常 简单 ， Web 开发 团 
队 需 要 日 积 月 累 、 稳 步 实施 可 重用 策略 。 


可 重用 策略 可 以 划分 为 三 种 资源 库 : 模式 、 组 件 ， 以 及 交互 设计 的 框架 
体系 。 这 些 资源 库 能 让 开发 团队 充分 利用 丰富 的 成 品 资源 ， 从 而 提高 工作 的 


我 们 发 现 ， 那 些 成 功 实施 可 重用 策略 的 团队 已 经 党 到 了 实 实在 在 的 甜头 。 
首先 ， 他 们 可 以 调用 已 经 ( 按 最 基本 水 平 ) 实现 的 成 品 集 ， 快 速 地 拼凑 起 有 效 
的 设计 雏形 ， 从 而 达到 让 设计 尽快 启 航 的 目的 。 这 些 团 队 完 成 整个 设计 的 时 间 
似乎 也 更 短 ， 而 且 可 以 周全 地 涵盖 一 切 有 利于 提升 用 户 体验 的 细节 和 精妙 之 处 。 
其 次 ， 尽 管 他 们 在 无 趣 的 支撑 功能 上 并 未 花费 太 多 时 间 ， 其 设计 成 果 却 似乎 具 
备 更 高 的 可 用 性 ， 而 且 在 所 有 功能 中 的 表现 都 始终 如 一 。 最 后 ， 团 队 进行 迭代 设 
计 ” 更 为 快捷 ， 这 让 他 们 有 机 会 在 设计 尚 具 可 塑性 的 时 候 对 它 进行 精细 的 调整 。 


在 团队 的 可 重用 策略 中 ， 模 式 、 组 件 和 交互 设计 的 框架 体系 三 者 扮演 着 不 
同 的 角色 ， 但 都 举足轻重 。 在 下 一 章 ， 我 们 会 更 为 详细 地 讨论 每 一 种 资源 ， 不 
过 首先 请 允许 我 在 这 里 进行 一 个 简要 的 介绍 。 


1.1.1 EX: 预期 行为 的 锦 圳 


设计 模式 是 重用 拼图 中 的 第 一 块 零件 ， 它 的 灵感 来 自 于 Christopher 
Alexander ”提出 的 建筑 模式 这 一 概念 【 见 其 1977 年 所 著 的 A Pattern Language: 
Towns, Building, Construction (建筑 模式 语言 : 城镇 、 建 筑 、 构 造 》) 一 书 ， 牛 
津 大 学 出 版 社 ]。Alexander 观察 人 们 生活 和 工作 的 具体 行为 ， 然 后 创建 出 一 系 
列 关 于 楼 房 建筑 如 何 支 持 这 些 行 为 的 可 重用 描述 。 模 式 并 不 会 使 建筑 师 们 落 入 
一 成 不 变 的 案 自 ， 相 反 地 ， 它 为 他 们 提供 资源 以 确保 所 有 细节 的 正确 性 。 


O 和 迭代 设计 是 一 种 具有 更 高 成 功率 和 生产 率 的 软件 开发 方式 。 在 和 迭代 式 设 计 中 ， 整 个 开发 过 
程 被 分 解 为 一 系列 周期 短小 、 固 定 的 小 项 目 ， 被 称 为 一 系列 的 “迭代 ”。 每 一 次 欠 代 都 包括 
需求 分 析 、 设 计 、 实 践 与 测试 。 通 过 这 种 方法 ， 开 发 工作 可 以 在 需求 全 部 确定 之 前 启动 ， 
并 在 一 次 迭代 中 完成 系统 的 一 部 分 功能 或 开发 ， 然 后 通过 客户 的 反馈 来 细 化 需求 ， 并 开始 
新 一 轮 的 迭代 。 

O Christopher Alexander 于 1936 年 出 生 于 奥地利 维也纳 。 他 是 当代 建筑 大 师 ， 以 其 设计 理论 
和 丰富 的 建筑 设计 作品 而 闻名 于 世 。Alexander 认为 ， 建 筑 的 使 用 者 比 建筑 师 更 清楚 他 们 
需要 什么 ， 因 此 创造 并 以 实践 验证 了 模式 语言 C5 Sarah Ishikawa 和 Murray Silverstein € 
作 )。 建 筑 模 式 语言 赋予 所 有 人 设计 和 建造 的 能 力 。1958 年 Alexander 移居 美国 ， 目 前 是 加 
州 大 学 伯克利 分 校 的 终身 荣誉 教授 。 
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如 今 的 设计 模式 也 与 之 类 似 。 比 如 ， 让 我 们 假设 一 位 正在 订 票 的 用 户 需要 
输入 日 期 。 有 哪些 支持 输入 日 期 的 设计 呢 ? 一 个 带 上 自动 分 析 功 能 的 文本 框 ? 分 
别 表示 年 、 月 、 日 的 三 个 数字 下 拉 列 表 ? 可 以 直接 点 选 日 期 的 弹出 式 日 历 ? 


针对 同一 种 行为 ， 不 同 的 选择 体现 出 了 不 同 的 设计 。 当 开发 团队 指定 一 种 
最 适合 他 们 《及 其 用 户 ) 的 设计 时 ， 就 能 将 其 定义 为 一 个 模式 。 日 后 ， 当 团队 
需要 响应 类 似 的 行为 时 ， 就 能 以 相似 的 方式 进行 响应 ， 利 用 之 前 的 工作 成 果 来 
满足 用 户 已 经 确立 的 需求 。 图 1-1 为 一 个 模式 文档 。 


YAHOO! DEVELOPER NETWORK 
Design Pattern Library 


Yahoo! Developer Network > Design Pattern Library > Search Pagination 


Search Pagination 


Problem Summary 


The user needs to view a set of search results ranked by relevance that is too large to 
easily display within a single page. 


EXAMPLE: 


Results Page: 
12345678 9 10 b Next 


for Yahoo! Search 


Use When 


* Displaying search results. 
* There are more results than can comfortably fit within one screen. 


1.1.2 组件: 高 效 利 用 可 重用 的 代码 
除了 模式 之 外 ， 开 发 者 们 还 需要 一 种 简便 的 方式 来 重用 具体 的 代码 。 


我 们 选 定 了 可 用 的 设计 模式 以 后 ， 就 需要 考虑 具体 的 实现 问题 了 。 要 想 让 
弹出 式 日 历 能 顺利 工作 ， 屏 幕 上 必须 得 显示 日 期 。 日 历 必 须 得 响应 鼠标 的 点 击 。 
它 的 外 观 还 得 与 其 他 的 界面 元 素 保持 一 致 。 这 些 都 是 组 件 大 显 身手 的 地 方 。 


O 雅虎 设计 模式 库 〈Yahoo Design Pattern Library) 目前 已 发 布 了 50 个 雅虎 认为 最 优 的 设计 模 
式 ， 包 括 分 页 系统 、 导 航 和 页 面 布局 等 。 网 址 为 http://developer.yahoo.com/ypatterns/。 
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组 件 会 从 像素 级 别 来 详细 指定 设计 响应 。 它 们 通常 以 代码 的 形式 来 体现 ， 
因此 组 件 实 际 上 也 体现 了 具体 的 交互 行为 。 它 们 是 具备 了 诸如 字体 、 颜 色 和 布 
局 等 样式 元 素 的 功能 性 设计 方案 ， 如 网 1-2 所 示 。 


& Sun Web Design 


Design System Code & Specs Guidelines Assets 


Home > Web Design > Components > 


HP02 Download Panel ES 


Page Regions B Tags B Az 目 Search 


Include: B BETTE] B [598 


E] Featured Audience Selector & Container 


Definition 
ibd 


Usage 
Used only on the homepage 
Show all Templates 


E] Featured Audience Selector & Container Sample || Code Templates (6) 


ibd 


Contact | About Sun | News & Events | Employment | Site Map | Privacy | Terms of Use | Trademarks | Copyright 1994-2006 Sun Microsystems, Inc. 


开发 人 员 用 组 件 来 拼凑 出 设计 的 所 有 细节 。 组 件 构 建 完成 以 后 ， 就 变 成 了 
随时 待命 的 现成 元 素 ， 能 轻易 地 组 入 到 任何 新 界面 中 去 。 这 使 得 每 一 个 环节 的 
开发 速度 都 得 到 了 提高 ， 从 早期 的 原型 阶段 到 最 后 的 部 署 阶段 莫不 如 此 。 简 而 
言 之 ， 组 件 就 是 将 设计 模式 进行 完整 代码 化 、 模 块 化 后 得 到 的 可 执行 版 本 。 


1.1.3 框架 体系 : 最 后 的 拼图 定 乾 坤 
交互 设计 的 框架 体系 〈 也 就 是 本 书 主题 ) 是 这 个 三 位 一 体 中 的 最 新 成 员 。 如 


果 说 设计 模式 是 某 个 常见 问题 的 通用 解决 方案 ， 那 么 交互 设计 的 框架 体系 则 是 一 


(D Sun.com 是 Sun 公司 的 网 站 。Sun 这 个 名 字 其 实 来 自 于 Stanford University Network〈 斯 坦 
福 大 学 网 络 ) 的 首 字母 缩写 。 该 公司 推出 的 著名 产品 包括 Solaris 操作 系统 、Java 平台 技 
术 及 MySQL 数据 库 系 统 等 。Sun 在 行业 中 被 认为 是 最 具 创造 性 的 企业 之 一 ， 不 断 尝试 新 
的 软件 方式 和 定价 模式 ， 但 在 2009 年 ， 该 公司 以 74 亿美 金 的 价格 被 Oracle (甲骨 文 ) 公 


司 收购 。 


图 1-2 
Sun.com? [F X4» 
组 件 的 存档 记录 
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系列 设计 模式 再 加 上 其 他 元 素 和 信息 ， 用 以 指导 完整 的 系统 或 站 点 上 下 文 的 设计 。 


和 人 体 一 样 ， 每 一 个 Web 应 用 都 由 一 系列 相互 合作 的 子 系统 所 组 成 。 每 一 个 
子 系统 都 包含 许多 独立 的 单元 ， 每 个 单元 都 具有 各 自 的 功能 和 用 途 。 如 果 对 这 些 
成 功 的 《和 不 成 功 的 ) 网 站 及 应 用 进行 详细 的 解剖 和 分 析 ， 我 们 不 仅 能 够 标识 出 
那些 在 不 同 环境 下 满足 用 户 需求 的 常用 元 素 ， 而 且 能 够 更 加 深刻 地 理解 人 类 行为 ， 
从 而 改善 这 些 标准 ， 同 时 在 不 牺牲 可 用 性 的 前 提 下 将 我 们 的 设计 提升 到 新 的 高 度 。 


图 1-3 为 一 个 框架 体系 。 


图 1-3 
一 个 框架 体系 的 Head back to rhjr.net! 


存档 文件 


Web Anatomy Sign-up 


Description 


EN The purpose of the sign-up framework is to convince visitors to 
register and become subscribers, Active members. Paying customers. 

Resources Its intention is not only to address objections that site users may have 
prior to signing up, but also, and perhaps more importantly, to entice 


About frameworks 


Subscribe to updates 
Contact In essence, the sign-up framework exists purely to persuade, and then 


to enable a user to act on his new impulse to dive in. 


them. 


Tweet this! 
Context of Use 
Tweet about this site! 


The sign-up framework applies to applications that require users to 


Frameworks register in order to save, publish, store, or otherwise take ownership of 
Catalog or manage the content they create. These applications are often 
Shopping cart presented as stand-alone sites that visitors can access for the first 
Order management time only via top-level marketing pages, such as the home page or a 
Search Learn More page. However, applications like this can also exist simply 
Sign-up as a section of a larger site. 

jeena i Task Flow 


Profile / Account management 
Movie sites (niche example) 
Microsite 


Typically, a user explores the home page and possibly a Learn More or 
Features page, scans any relevant (and short) descriptions, and at 
some point accesses the registration process. He then completes the 
registration form, is confirmed as a new member, and then begins 
using the application. An alternative task flow, as discussed in the 
“Blank Slate” section, is one in which the user can begin using the 
application before registering, only being asked to register once it is 
absolutely necessary to continue. 


Where Used 


Blinksale 
Basecamp 


Elements 


Value Proposition 

Investment Breakdown 

Testimonial 

Call to Action 

Blank Slate / Immediate Engagement 
Registration form 


Design Criteria 


Communicate a clear value proposition 
Set expectations 

Demonstrate that it works well 
Encourage action and enable progress 
Associate the user to the user's actions 


Source Files 


Balsamig Mockups (45kb) 
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换 名 话说， 如 果 仔细 观察 那些 已 然 运 作 良 好 的 案例 ， 并 且 分 析 其 缘 后 的 原 
因 ， 我 们 就 能 同时 解决 两 个 问题 : 其 一 是 明确 设计 的 切入 点 ; 其 二 是 了 解 如 何 
才能 创建 出 更 好 、 更 强 、 更 快 而 且 和 那些 老牌 经 典 一 样 易于 使 用 的 交互 设计 。 


比如 ， 在 第 4 章 中 我 们 将 描述 一 个 注册 框架 ， 包 含 了 数 个 常用 于 鼓励 用 户 
注册 的 设计 元 素 。 其 中 每 一 个 元 素 都 可 以 被 看 作 是 一 个 独立 的 设计 模式 。 例 如 
“电梯 陈述 ”( 关 于 应 用 程序 本 身价 值 的 一 段 简要 声明 ) “， 它 可 以 让 人 们 快速 、 
高 效 地 了 解 这 个 网 站 或 应 用 能 提供 什么 。 然 而 ， 尽 管 “电梯 陈述 ”消除 了 用 户 
脑海 中 的 疑点 ， 解 决 了 问题 ， 但 它 本 身 其 实 并 没有 多 大 意义 。 事 实 上 它 隶 属于 
另 一 个 更 大 的 问题 一 一 如 何 劝 服 人 们 在 轨 新 的 Web 应 用 中 注册 。 


框架 体系 不 去 为 “ 狂 隘 的 ”问题 提供 “狭隘 的 ”解决 方案 ， 它 处 理 的 是 较 
为 复杂 的 问题 。 它 从 产品 的 整体 背景 出 发 ， 为 设计 确定 指导 方针 。 


当 一 位 用 户 到 达 某 个 新 网 站 ， 犹 殉 是 否 注册 的 时 候 ， 注 册 框 架 为 他 做 出 清 
楚 的 介绍 、 解 答疑 问 、 指 明 起 点 ， 并 提供 注册 的 方法 。 没 有 哪 一 个 单独 的 设计 
模式 能 处 理 所 有 这 一 切 。 实 际 上 ， 真 正解 决 问题 的 是 这 些 元 素 的 组 合 。 进 一 步 
说 ， 任 何 独立 的 设计 模式 都 不 能 告诉 我 们 如 何 满足 用 户 的 所 有 需求 ， 也 不 能 告 
诉 我 们 为 什么 需要 首先 处 理 这 些 需求 。 


为 了 弥补 这 一 点 ， 框 架 体系 为 包含 该 模式 的 整个 子 系统 进行 了 描述 。 一 个 
注册 子 系统 需要 有 输入 用 户 ID 和 密码 的 模式 。 但 它 也 需要 有 重新 获得 密码 的 模 
式 、 建 立 用 户 档 案 的 模式 、 创 建新 ID 的 模式 ， 以 及 修改 密码 的 模式 。 


开发 团队 通过 观察 其 他 设计 并 提取 共性 的 方式 来 标识 、 记 录 自 己 的 框架 体 
系 。 这 些 元 素 变 成 了 一 个 清单 ， 列 出 了 一 个 完整 的 系统 所 需要 的 一 切 ， 从 而 帮 
助 团队 确保 拥有 所 有 正确 的 模式 ， 以 便 开 展 设计 工作 。 


框架 体系 是 一 种 高 度 的 抽象 。 它 不 涉及 具体 的 品牌 化 或 视觉 设计 需求 一 一 
那 是 组 件 来 完成 的 事情 。 相 应 地 ， 组 件 又 以 独立 的 设计 模式 为 基础 。 确 切 地 说 ， 
框架 体系 是 某 种 范围 更 广 的 结构 化 系统 ， 从 一 开始 就 能 帮助 设计 师 对 模式 进行 
选择 。 我 们 相信 ， 这 种 和 模式 、 组 件 相 配合 的 结构 化 系统 ， 就 是 Rolf 所 说 的 
“界面 模块 ”。 


cr 


“电梯 陈述 ”(elevator pitch) 是 一 个 风险 投资 行业 的 术语 ， 指 的 是 关于 产品 、 服 务 或 项 目 上 
摘要 性 概述 。 原 意 是 指 在 和 投资 家 同 乘 电梯 的 时 间 内 ， 创 业者 用 极为 简要 的 方式 介绍 自 
的 项 目 并 争取 投资 。 在 本 书 第 S 章 和 第 7 章 都 有 关于 “电梯 陈述 ”的 进一步 讨论 。 


cu 
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1.2 ”超越 常规 


除了 能 有 效 地 加 快 迭 代 ， 产 生 易 用 的 设计 之 外 ， 框 架 体系 还 能 帮助 我 们 更 
深刻 地 理解 现 有 标准 背后 的 逻辑 依据 。 通 过 这 种 “解剖 镜 ”， 设 计 师 可 以 反 向 追 
漳 影 响 当 今 各 种 设计 决定 的 最 初 逻辑 原理 ， 然 后 将 自己 的 理解 转化 为 准则 ， 应 
用 到 更 加 新 颖 的 设计 上 。 我 们 将 在 第 2 章 更 为 深入 地 讨论 框架 体系 的 这 一 方面 
内 容 。 
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需要 提 到 的 是 ， 重 用 带 来 的 好 处 并 不 是 无 偿 的 。 识 别 可 重用 的 元 素 需 要 花 
费时 间 和 精力 ， 为 它们 备案 、 存 档 也 颇 为 耗 时 ， 而 且 保 持 资源 库 的 更 新 也 是 一 
项 长 期 而 且 劳 心 费力 的 任务 。 


但 如 果 把 它们 分 为 模式 、 组 件 和 框架 体系 三 位 一 体 的 形式 ， 事 情 就 好 办 多 
了 。 因 为 这 样 一 来 ， 我 们 就 能 让 设计 师 和 开发 人 员 对 工作 进行 分 配 。 


组 件 更 接近 于 最 后 的 实现 工作 ， 因 此 我 们 通常 能 让 开发 人 员 来 管理 这 个 库 。 
而 交互 式 设计 框架 体系 则 重点 关注 用 户 体验 ， 因 此 更 适合 让 设计 人 员 来 负责 。 
模式 库 则 介 于 设计 和 开发 两 者 之 间 。 


小 型 的 公司 也 许 无 需 耗费 大 量 精 力 来 保持 资源 库 的 更 新 ， 但 是 规模 较 大 的 
企业 则 需要 付出 更 大 的 努力 。 管 理 者 需要 鼓励 团队 成 员 为 资源 库 标 识 新 的 元 素 
《或 者 直接 新 增 元 素 )， 同 时 还 要 确保 已 录入 的 元 素 能 与 时 俱 进 。 由 于 资源 库 是 
一 种 共享 的 资源 ， 整 个 团队 也 应 当 分 担 监管 的 义务 。 这 种 劳动 分 工 能 够 避免 让 
某 人 独自 身 负重 担 ， 同 时 也 有 利于 让 资源 库 在 团队 成 员 的 工作 中 随时 保持 活跃 ， 
提醒 他 们 可 以 利用 其 中 的 资源 。 


构建 完成 以 后 ， 这 些 资 源 库 就 能 为 设计 团队 提供 强 有 力 的 援助 。 它 们 能 ; 
整个 设计 流程 注入 活力 ， 加 快 产品 交付 的 过 程 ， 同 时 为 优秀 的 设计 扫 清 障碍 。 
长 期 实施 可 重用 策略 节省 下 来 的 费用 无 疑 要 高 于 最 初 的 开发 投入 。 

以 上 三 种 资源 库 聚 集 到 一 起 ， 就 组 成 了 我 们 所 谓 的 可 重用 铁 三 角 (The 
Reuse Trinity)。 我 们 会 在 下 一 章 深 入 描述 这 三 种 资源 ， 并 详 察 三 者 之 间 的 关系 。 
在 此 之 后 ， 我 们 会 对 数 个 常用 框架 进行 控 气 ， 以 型 清 它们 的 来 龙 去 脉 。 

122 古老 问题 有 新 解 
通过 把 Web 视 作 多 个 结构 化 系统 ， 并 标识 其 中 与 你 自己 的 项 目 相关 的 结构 


1.2 超越 常规 


化 系统 ， 不 仅 便于 你 快速 开展 设计 工作 ， 还 有 助 于 积累 经 验 ， 设 计 出 业界 前 沿 
的 解决 方案 : 适合 用 户 使 用 ， 以 低 投 入 实现 高 产 出 ， 缩 短 项 目 周期 ， 而 且 从 一 
开始 就 确保 设计 的 可 用 性 。 


通过 框架 体系 ， 我 们 能 清楚 地 看 到 基于 当今 标准 的 设计 方针 。 我 们 同时 也 
会 看 到 组 合 更 佳 用 户 体 验 的 可 能 性 。 但 这 里 却 没有 什么 包 治 百 病 的 良 方 。 


换 句 话说， 交互 设计 的 框架 体系 并 不 深奥 。 它 们 只 是 系统 框架 而 已 ， 是 服 
务 于 系统 及 其 上 下 文 背景 的 设计 指南 ， 可 以 无 颖 地 构成 完整 的 解决 方案 。 它 们 
可 以 而 且 应 该 ) 进行 调整 ， 赋 予 独特 的 风格 ， 也 能 被 定制 。 它 们 就 是 一 个 易 
用 设计 的 构成 模块 。 而 更 好 的 是 ， 它 们 可 以 告诉 我 们 如 何 演 变 和 进化 。 


1.43 问题， 答案 与 灵感 


当 我 们 致力 于 编写 本 书 时 ，Robert 曾 在 数 次 讲座 和 会 议 中 谈 到 过 交互 设计 
的 框架 体系 ， 会 议 期 间 Robert 记录 了 许多 听众 和 与 会 者 提出 的 问题 。 我 们 据 此 
对 本 书 的 内 容 和 结构 不 断 地 进行 修改 ， 以 期 涵盖 并 解决 这 些 问 题 。 我 们 发 现 ， 
仅仅 写 一 本 有 关 框 架 体系 的 参考 工具 书 是 远 远 不 够 的 ， 更 为 重要 的 是 能 清楚 地 
解释 它们 为 什么 能 产生 如 此 重大 的 影响 、 它 们 的 组 成 及 其 原因 ， 在 自己 的 设计 
项 目 中 使 用 框架 时 需要 考虑 哪些 问题 、 如 何 标识 和 共享 框架 如 何 备案 和 记录 框 
架 ， 如 何 使 框架 融入 设计 过 程 ， 以 及 如 何 能 充分 利用 它们 的 潜能 ， 从 而 达到 启 
发 创新 的 目的 。 


因此 ， 在 本 书 的 一 开始 ， 我 们 会 近 距 离 地 观察 各 种 模式 、 组 件 和 框架 体系 ， 
了 解 它 们 如 何 相互 协作 以 形成 一 个 完整 的 可 重用 策略 。 随 后 我 们 将 察看 若干 重 
要 的 框架 体系 ， 揭 示 它 们 的 历史 和 效能 ， 讲 解 如 何 使 用 这 种 轿 新 的 方式 来 剖析 
网 页 ， 并 且 深 入 理解 这 些 框架 能 够 成 为 标准 的 原因 ， 以 及 从 中 学 到 的 知识 和 经 
验 。 在 此 之 后 ， 我 们 会 演示 如 何 利 用 框架 体系 来 完成 一 个 项 目 ， 同 时 强调 你 能 
进行 的 调整 ， 以 便 充分 利用 这 些 新 的 资源 。 最 后 ， 我 们 会 说 明 在 你 自己 的 公司 
或 组 织 中 ， 应 当 如 何 标识 并 开始 使 用 框架 体系 。 


我 们 衷心 希望 ， 你 在 读 完 本 书 之 后 能 受到 鼓舞 和 激励 ， 从 而 着 手 构建 一 个 
庞大 的 、 属 于 你 自己 的 、 经 过 周详 测试 的 界面 模块 资源 库 。 


出 


本 章 中 ， 我 们 将 深入 探究 可 重用 策略 中 的 三 个 组 成 部 分 ， 以 便 在 后 续 的 内 

容 中 你 能 更 好 地 理解 设计 模式 、 组 件 和 交互 设计 框架 体系 三 者 之 间 是 如 何 
相互 关联 、 相 互 协作 的 。 

可 重用 铁 三 角 的 诞生 并 非 轻 而 易 举 ， 产 生 的 顺序 也 绝 非 符合 逻辑 。 模 


式 的 概念 最 初始 于 Christopher Alexander 于 1977 年 写 的 书 ， 其 后 又 被 Luke 
Wroblewski ^, Bill Scott ^, Martijn van Welie ?. Theresa Neil ^. Christian 


® Luke Wroblewski 是 一 位 界面 设计 师 、 战 略 家 及 作家 。 他 和 曾 是 美国 伊利 诺 斯 州 大 学 界面 设 
计 专 业 的 老师 ， 后 任职 eBay， 领导 组 织 了 多 项 网 站 改进 工作 。 现 任 雅虎 公司 产品 构思 与 设 
计 部 门 高 级 总 监 ， 并 创立 了 LukeW Interface Designs。 若 有 Site-seeing: A Visual Approach to 
Web Usability ((Web 可 用 性 的 可 视 化 》)、Web Form Design: Filling in the Blanks ((Web 表单 
设计 》) 等 。 个 人 网 站 是 http://www.lukew.com« 

O Bill Scott 有 着 长 达 25 年 的 从 业经 验 ， 在 设计 和 开发 领域 均 有 建树 。 他 曾 在 雅虎 任 Ajax T€ 
术 推 广 专家 一 职 ， 并 负责 管理 雅虎 设计 模式 库 ， 现 任 Netflix 公司 的 用 户 界 面 工程 总 监 。 
与 Theresa Neil 4344 Designing Web Interfaces: Principles and Patterns for Rich Interactions 
(Web 界面 设计 》) 一 书 。 

G Martijn van Welie 现任 飞利浦 高 级 交互 设计 顾问 一 职 。 写 了 很 多 用 户 界 面 设计 模式 方面 的 文 
章 。 其 个 人 网 站 是 http://www.welie.com。 

® Theresa Neil 是 一 位 用 户 体验 咨询 师 。 她 曾 与 Bl Scott 共事 ， 创 建 了 Sabre 用 户 体验 团队 。 
É 2001 年 起 ， 她 为 各 种 新 技术 及 财富 500 强 公 司 组 织 设计 了 80 多 个 网 站 、 桌 面 程序 和 手 
机 应 用 ， 客 户 包 括 美国 公共 广播 公司 、PayPal 及 Pervasive。 她 也 是 《Web 界面 设计 》 的 作 
者 之 一 。 其 个 人 网 站 是 http://www.theresaneil.com. 


第 2 章 可 重用 铁 三 角 


Crumlish ^, Jenifer Tidwell 等 模式 倡导 者 和 众多 业界 专家 所 普及 和 发 扬 光 大 。 
正 是 在 他 们 的 努力 下 ， 模 式 这 一 概念 目前 已 被 推广 到 了 Web 设计 实践 的 前 沿 。 
而 组 件 一 一 表示 模式 自然 演变 的 完整 的 、 生 产 就 绪 的 页 面 元 素 一 一 则 出 现 得 颇 
晚 ， 至 少 在 软件 设计 领域 是 如 此 与 开发 相 比 )。 


事实 上 ， 尽 管 有 关 组 件 的 想法 锥 形 已 经 酝酿 了 数 年 的 时 间 ， 但 它 才 刚 开 始 
作为 一 种 概念 被 标准 化 。 这 要 特别 感谢 来 自 EightShapes “的 两 位 设计 师 Nathan 
Curtis (车 有 《模块 化 网 页 设计 :为 用 户 体 验 设计 和 存档 而 创建 可 重用 的 组 件 》 
一 书 ，New Riders 出 版 社 ) 和 Dan Brown (车 有 《设计 沟通 十 器 》 一 书 ，New 
Riders 出 版 社 ) 所 付出 的 努力 。 而 框架 体系 则 是 拼图 的 最 后 一 块 ， 在 你 手中 这 
本 书 里 首次 以 正规 文档 的 形式 记录 下 来 。 然 而 ， 在 实际 工作 中 ， 我 们 应 该 首先 
考虑 框架 体系 ， 模 式 其 次 ， 最 后 是 组 件 。 如 图 2-1 所 示 ， 这 也 是 它们 在 网 页 设 
计 过 程 中 最 为 有 效 的 使 用 和 思考 顺序 。 


设计 模式 实际 上 就 是 隶属 于 大 型 框架 体系 的 生产 模式 。 而 组 件 则 是 针对 具 
体 某 个 系统 对 模式 进行 实现 后 的 产物 。 它 将 模式 具象 化 为 网 站 或 应 用 界面 中 的 
一 个 部 件 ， 使 之 能 够 通过 网 络 被 直接 交互 。 


接 下 来 我 们 会 按照 构思 这 些 元 素 的 顺序 逐一 进行 深入 讨论 。 无 论 你 对 模式 
和 组 件 是 否 熟悉 ， 预 先 了 解 这 些 框 架 体 系 的 基本 组 成 部 分 ， 都 将 有 助 于 我 们 建 
立 起 正确 的 大 局 观 。 


O Christian Crumlish 是 一 位 极其 多 产 的 作家 和 信息 设计 师 。 他 早 在 1994 年 就 开始 参与 交互 
分 析 和 设计 的 工作 ， 是 Adaptive Path 的 总 裁 及 创始 人 之 一 ， 如 今 主 要 负责 雅虎 设计 模式 
库 。 他 著作 等 身 ， 自 1990 年 起 ， 出 版 了 包括 畅销 书 Internet for Busy People(《 为 忙碌 人 十 
讲解 Internet)). The Power Of Many: How The Living Web Is Transforming Politics, Business, 
And Everyday Life (KARMA: 网 站 如 何 改 变 政 治 、 经 济 和 日 常生 活 》)、Designing Social 
Interface: Principles, Patterns, and Practices for Improving the User Experience (《 社 会 化 网 站 
界面 设计 ， 提升 用 户 体验 的 原则 、 模 式 及 实践 》》 C^ Erin Malone 合 著 ) 等 近 30 本 著作 。 
其 个 人 网 站 是 http://mediajunkie.como 
Q Jenifer Tidwell 目前 在 技术 计算 软件 厂商 MathWorks 公司 任 交 互 设 计 师 及 软件 工程 师 一 职 。 
她 从 1997 年 开始 研究 用 户 界 面 模式 ， 同 时 也 是 一 名 RIA (Rich Internet Application) 技术 的 
旧 导 者 。 著 有 Designing Interfaces: Patterns for Effective Interaction Design 〈《 设 计 界 面 : 有 
效 的 交互 设计 模式 》) 一 书 。 其 个 人 网 站 是 http://jtidwell.net。 
© EightShapes 是 Nathan Curtis 和 Dan Brown 共同 创立 的 用 户 体验 设计 公司 ， 总 部 在 华盛顿 。 
该 公司 提供 计划 、 研 究 、 信 息 架 构 、 交 互 设计 、 用 户 测 试 等 多 方面 的 服务 ， 同 时 为 客户 创 
造 既 能 满足 用 户 需求 ， 又 能 在 商业 目标 和 技术 可 行 性 上 取得 平衡 的 解决 方案 。 公 司 网 站 是 
http://eightshapes.com. 
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图 2-1 
可 重用 铁 三 
交互 式 设计 框 
设计 模式 
2.1 设计 模式 
设计 模式 其 实 是 一 种 针对 某 个 常见 问题 的 常用 解决 方案 。 比 如 ， 分 页 模 
式 就 为 我 们 呈现 了 一 种 标准 的 交互 接口 ， 它 将 搜索 结果 以 多 个 页 面 显示 ， 同 时 
在 每 个 结果 页 的 底部 加 上 指向 不 同 页 面 的 链接 。 这 种 设计 通常 会 包含 Previous 
(上 一 页 ) 和 Next (下 一 页 ) 按钮 、 通 往 其 他 各 个 结果 页 的 数字 序号 链接 以 及 
一 个 指示 当前 页 面 的 视觉 标志 ， 如 图 2-2 所 示 。 
图 2-2 


EXAMPLE: 


来 自 雅 虎 设计 模 
HENDRE 
zi Results Page: 


Pagination contro! for Yahoo! Search 


似乎 很 眼熟 ? 本 应 如 此 。 在 每 一 个 雅虎 搜索 结果 页 面 的 底部 ， 你 都 能 见 到 
它 。 


2.4 设计 模式 


也 许 雅 虎 并 不 是 第 一 个 使 用 这 种 设计 的 网 站 ， 但 是 雅虎 的 版 本 被 使 用 的 频 
率 如 此 之 高 ， 其 他 几乎 所 有 的 搜索 系统 都 或 多 或 少 沿用 了 它 。 这 使 它 变 成 了 一 
种 模式 一 一 取得 了 巨大 成 功 的 模式 。 实 际 上 ， 它 已 经 被 不 计 其 数 的 模式 资源 库 
(无 论 是 公共 库 还 是 私有 库 〉 所 收录 和 引用 。 


设计 模式 所 带 来 的 首要 好 处 就 是 ， 用 户 能 够 将 自己 在 某 一 个 网 站 上 的 体验 
转化 为 通用 的 操作 经 验 ， 运 用 到 其 他 所 有 使 用 相同 模式 的 网 站 中 去 。 在 雅虎 上 
进行 了 数 次 搜索 之 后 ， 用 户 就 能 很 轻松 地 理解 其 他 任何 使 用 了 相似 设计 的 分 页 
界面 ， 不 管 是 在 哪个 网 站 。 


而 男 一 方面 ， 设 计 师 们 从 中 也 获 益 菲 浅 。 因 为 模式 能 够 为 大 量 典型 的 设计 
问题 提供 “ 色 半 ”的 解决 方案 。 不 必 为 每 一 个 新 网 站 都 思考 和 创造 新 的 搜索 导 
航 系 统 ， 我 们 只 需要 拿 出 分 页 模式 ， 做 一 些小 小 的 调整 就 可 以 了 。 


数 年 来 ， 许 多 成 熟 的 设计 模式 已 经 成 为 互联 网 中 的 模块 ， 这 无 疑 是 明智 之 
举 。 而 框架 体系 的 构建 前 提 就 是 成 功 的 模式 。 


2.1.1 设计 模式 六 要 素 


要 想 更 好 地 理解 模式 ， 我 们 不 妨 看 看 在 一 份 标准 的 设计 模式 描述 文档 中 都 
包含 些 什 么 ， 如 图 2-3 所 示 。Jared 的 公司 UIE 列 出 了 以 下 六 要 素 。 


1. 模式 名 称 


如 果 我 们 正在 讨论 一 个 元 素 ， 它 使 用 户 能 进入 到 网 站 受 密码 保护 的 区 域 ， 
那么 我 们 也 许 会 称呼 它 为 “用 户 名 和 密码 控件 和 “两 行 式 登录 元 素 ” 或 者 “ 登 
录 元 素 ”。 


模式 名 称 的 选择 务必 要 小 心 谨 蛋 。 在 此 之 前 ， 设 计 中 出 现 了 太 多 的 无 名 元 
素 ， 以 至 于 在 讨论 中 经 常会 有 类 似 “ 那 些 我 们 常常 放 在 左边 的 小 方块 ”这 样 的 
说 法 。 而 之 所 以 有 模式 名 称 ， 其 目的 就 是 为 了 促进 清晰 的 交流 和 沟通 ， 这 样 在 
会 议 、 设 计 文 档 或 者 其 他 地 方 我 们 就 能 明确 地 称呼 某 个 具体 元 素 。 

我 们 发 现 ， 为 模式 命名 需要 技巧 、 创 造 力 以 及 一 点 点 运气 。 开 发 团队 往往 
在 一 开始 为 某 个 模式 起 了 名 字 ， 过 了 一 阵子 发 现 大 家 经 常 使 用 的 却 是 男 一 个 名 字 。 

比如 ， 某 个 开发 团队 将 他 们 的 应 用 程序 的 对 象 属性 编辑 器 正式 定名 


为 “Infobox”( 信 息 框 )， 之 后 却 发 现 团队 里 根本 没 人 这 么 说 。 所 有 人 都 叫 它 
“Properties”( 属 性 )。 
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图 2-3 
来 自 Welie com 公 Repeated Menu 
模式 资源 库 ? Problem 
一 份 模式 文档 


nr 


Users need to access the main navigation 


Solution 


Repeat the main navigation or the bottom of the page 


Dutch | 


1 NEW DOCUMENTS | SEARCH | ORGANIZATION 


Search 

Search term: ] 
Type of document: All type of documents 

Search in: All he 


HOME | NEW DOCUMENTS | SEARCH | ORGANIZATION 


| 
From www.minvws.nl d? 


Use when 


This pattern is often used together with top (horizontal) navigation. Web pages are 
frequently more than one "view" long and users will need to scroll down to see the entire 
page. In such cases, the main navigation is likely to be out of sight. This pattern makes 
the main navigation accessible again. Users use different browser-windows sizes so that 
scrolling cannot always be avoided. Users may know what the main navigation looks 
like because they have already seen it. When users have scrolled down the main 
navigation is out of sight 


How 


Provide a simple bar with the same elements as the main navigation menu. However, 
make it simple, preferably just text links in a smaller font size. 


Why 


Allows users to access the navigation after scrolling. There is no need to go back to the 
top because the navigation is within immediate reach. By presenting it in a different way, 
the users know that it is not the main navigation but a secondary feature for their 
convenience. 


有 些 开 发 团队 在 模式 的 描述 中 为 其 添加 了 一 系列 的 昵称 、 同 义 词 以 及 代称 
(also-known-as， 简 称 aka)。 这 能 帮助 团队 成 员 确 定 他 们 讨论 的 对 象 。 我 们 对 事 
物 的 称呼 常 第 会 随 着 时 间 而 改变 ， 因 此 如 果 模 式 名 称 能 和 当前 用 词 随时 保持 对 
应 和 更 新 ， 会 带 来 很 大 的 好 处 。 


pun 


® Welie.com 是 Martijn van Welie〈 见 本 章 第 2 BE). 的 个 人 网 站 。Martijin 在 网 站 上 公布 了 自 
所 整理 的 满足 用 户 需 求 、 程 序 需 求 和 上 下 文 设计 的 三 大 模式 资源 库 ， 共 计 120 余 个 模式 。 


cu 


2.4 设计 模式 


2. 描述 


描述 对 于 一 个 好 的 模式 来 说 至 关 重 要 。 通 过 描述 ， 那 些 对 该 元 素 不 太 熟悉 
的 团队 成 员 就 能 准确 地 理解 大 家 正在 讨论 的 内 容 。 


由 于 一 图 胜 千言 ， 界 面 截 图 也 非常 有 价值 。 如 果 某 个 模式 在 同一 个 网 站 中 
有 多 种 表现 形式 ， 那 么 各 来 一 张 截图 会 有 极 大 帮助 。 


比如 ， 一 个 登录 元 素 可 能 会 有 如 下 描述 〈 伴 随 着 合适 的 界面 截图 ) : 


一 个 两 行 的 表单 元 素 ， 用 于 采集 用 户 的 ID 和 密码 ， 从 而 使 他 们 能 够 进入 
网 站 内 受 密码 保护 的 区 域 。 


描述 无 需 像 文学 作品 那样 精 雕 细 琢 ， 但 它 应 当 包 含 足够 的 信息 来 解释 该 元 
素 存在 的 理由 ， 并 说 明 如 何 将 它 和 网 站 上 的 其 他 元 素 进 行 区 分 。 


3. 上 下 文 情境 

与 一 般 的 设计 指南 或 样式 参考 文档 相 比 ， 设 计 模 式 的 主要 优点 之 一 在 于 它 
强调 了 每 一 种 模式 所 使 用 的 模式 库 中 的 上 下 文 情境 。 在 构思 新 设计 的 时 候 ， 设 
计 师 们 可 以 利用 上 下 文 描述 来 确定 该 模式 是 否 运用 得 当 。 

例如 我 们 的 登录 元 素 ， 有 关 它 的 上 下 文 情 境 可 能 会 是 如 下 描述 ; 
| 无 论 何 时 ， 只 要 网 站 中 的 某 位 用 户 希 望 从 公有 区 域 转向 访问 私密 信息 ， 我 


们 将 使 用 登录 元 素 。 在 面向 公众 的 页 面 中 ， 只 要 有 足够 155 像素 X210 像 
素 的 空间 ， 就 可 以 显示 该 模式 。 


当然 ， 在 这 里 还 需要 包括 在 不 使 用 登录 元 素 时 的 描述 : 


如 果 在 某 些 面向 公众 的 页 面 中 ， 重 直方 向 无 法 提供 足够 的 空间 ， 我 们 将 在 
RAW banner 横幅 处 使 用 单行 的 登录 元 素 。 或 者 在 网 站 受 密码 保护 的 区 域 
中 ， 不 使 用 登录 元 素 。 


上 下 文 情 境 是 不 断 变 化 的 。 当 开发 团队 加 入 了 更 多 元 素 ， 开 发 新 的 应 用 程 
序 ， 发 现 新 的 用 户 需 求 时 ， 都 需要 对 “上 下 文 情 境 ” 一 项 进行 频繁 的 更 新 。 理 
想 的 情况 是 ， 在 某 个 模式 生命 周期 的 任何 一 个 阶段 ， 设 计 师 都 能 通过 阅读 此 项 
而 迅速 了 解 该 元 素 是 否 适 用 于 手头 的 工作 。 


4. 曾 于 何 处 使 用 


“ 曾 于 何 处 使 用 ”是 模式 文档 中 另 一 个 不 断 变化 的 部 分 ， 它 列 出 了 那些 使 用 
过 这 一 模式 的 实例 。 模 式 每 一 次 将 其 转化 为 生产 系统 时 ， 都 应 当 对 此 项 进行 更 
新 。 开 发 团队 成 员 可 以 查看 已 经 实现 出 来 的 成 品 ， 了 解 茶 个 模式 的 运转 情况 。 
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5. 工作 方式 
开发 团队 在 这 里 将 描述 该 元 素 技术 层面 的 内 容 ; 


用 户 在 标记 有 User Name 的 输入 框 中 键入 他 们 的 用 户 ID， 在 标记 有 
Password 的 输入 框 中 键入 密码 (密码 内 容 会 被 这 盖 )。 如 果 他 们 愿意 ， 可 
以 点 击 Remember Me 复 选 框 ， 以 便 在 重复 访问 时 系统 能 预先 为 其 填写 
User Name 输入 框 。 当 就 绪 后 ， 用 户 点 击 标记 有 Log in 的 按钮 。 如 果 用 户 
名 和 密码 有 效 ， 则 显示 该 用 户 的 个 人 页 面 。 如 果 无 效 ， 则 显示 错误 页 面 
(参见 “登录 错误 ”模式 )。 


需要 的 细节 数量 取决 于 控件 的 复杂 级 别 ， 以 及 团队 成 员 对 它 的 熟悉 程度 
(如 果 是 他 们 自己 经 常 使 用 的 元 素 ， 就 不 需要 像 不 常见 元 素 那 样 进行 详尽 的 描 
述 )。 兽 有 一 个 可 用 性 团队 向 我 们 展示 了 利用 视频 捕捉 来 创建 演示 短片 ， 他 们 通 
过 这 种 方式 来 描述 元 素 的 运作 机 能 。 

与 该 元 素 产生 交互 的 其 他 模式 也 会 提 及 ， 此 举 能 帮助 设计 师 更 为 全 面 地 考 
虑 问题 ， 便 于 在 最 后 对 设计 进行 整合 。 


6. 其 他 必 备 模式 
很 少 有 能 完全 独立 存在 的 模式 。 一 个 模式 的 出 现 ， 通 常 都 意味 着 设计 师 还 
需要 考虑 其 他 模式 来 支持 它 。 


比如 说 ， 如 果 一 个 设计 需要 “登录 元 素 ” 模 式 ， 那 么 它 很 可 能 还 需要 下 面 
这 些 : 


口 创建 新 用 户 ID 的 模式 ; 

O 修改 密码 的 模式 ; 

口 重新 获得 密码 的 模式 ; 

口 从 网 站 的 受 密码 保护 区 域 退 出 的 模式 ; 

口 当 输 入 的 用 户 名 或 密码 不 正确 时 ， 显 示 错 误 信 息 的 模式 。 


所 有 这 些 模式 都 会 列 在 “ 必 备 模式 ”项 中 ， 并 附 有 它们 为 什么 “ 必 备 ”的 
相关 解释 (如 果 不 是 很 明显 的 话 )。 

设计 模式 的 文档 中 还 可 以 包括 苋 争 性 举措 、 模 式 历史 、 可 用 性 测试 结 
用 户 反 馈 和 讨论 记录 ， 等 等 。 


2.1.2 ”模式 资源 库 


如 图 2-4 所 示 ， 模 式 资源 库 就 是 模式 文档 经 
在 网 上 或 者 企业 内 部 进 和 
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以 下 是 一 些 公用 的 模式 资源 库 。 


口 雅虎 设计 模式 库 : http://developer.yahoo.com/ypatterns; 
O Designing Interfaces (是 同名 图 书 的 资源 网 站 ，Jennifer Tidwell $, 
O'Reilly 出 版 社 ) : http://designinginterfaces.com; 


0 Welie.com: http://www.welie.com. 


在 准备 使 用 模式 时 ， 许 多 开发 团队 都 会 偏向 这 些 现 成 的 、 公 用 的 模式 资源 
库 。 然 而 ， 尽 管 这 些 资 源 库 的 资料 通常 都 很 齐全 ， 而 且 免 费 ， 但 它们 却 无 法 说 
明 项 目 中 特定 的 技术 限制 和 业务 需求 。 因 此 对 于 有 具体 的 项 目 来 说 ， 公 用 模式 库 
的 用 处 可 能 并 不 大 。 最 有 用 的 模式 库 应 该 重点 关注 项 目 特定 的 规范 和 需求 。 


公用 的 模式 资源 库 倾 向 于 提供 通用 的 模式 ， 而 不 会 针对 某 个 具体 的 应 用 。 
它们 为 那些 公认 的 标准 Web 交互 提供 了 低级 别 的 基础 性 建议 ， 而 企业 往往 会 根 
据 自 己 的 应 用 或 网 站 对 这 些 模 式 进行 “定制 ” 把 过 于 通用 的 公用 模式 转化 为 真 
正 适 用 于 专属 设计 团队 的 模式 。 


尽管 如 此 ， 这 些 通用 的 模式 仍然 能 为 我 们 带 来 极 大 的 好 处 。 除 了 能 提供 基 
础 性 建议 ， 为 “定制 ”模式 提供 一 个 高 起 点 之 外 ， 这 种 模式 库 对 于 “单干 ”的 
设计 师 来 说 无 疑 是 一 种 绝 佳 的 资源 ， 不 管 在 企业 内 工作 还 是 在 外 面 做 顾问 都 是 
如 此 。 顾 问 常 常会 因为 客户 不 同 而 接触 到 各 式 各 样 的 项 目 ， 而 公用 模式 资源 库 
能 够 为 其 提供 适用 于 大 多 数 网 站 的 无 尽 资源 。 


内 部 模式 资源 库 中 的 模式 则 与 此 不 同 。 它 们 具有 更 强 的 针对 性 ， 只 对 应 
企业 内 部 的 网 站 ， 是 设计 团队 手中 威力 强大 的 工具 。 团 队 可 以 在 内 联网 中 利用 
wiki "或 者 微型 网 站 来 组 建 资源 库 ， 使 其 贴近 自身 的 设计 风格 ， 这 样 企业 中 的 其 
他 团队 在 实现 新 设计 的 时 候 就 能 直接 从 中 取 用 。 


构建 一 个 模式 资源 库 的 主要 困难 在 于 协调 运作 。 首 先 ， 个 人 或 团队 需要 从 
自己 的 所 有 案例 中 翻 找 、 标 识 出 已 经 在 使 用 的 模式 ， 其 次 他 们 还 需要 建立 稳固 
的 公布 和 共享 机 制 ， 为 每 一 种 模式 存档 备案 、 为 资源 库 制 订 长 期 的 维护 计划 ， 
最 后 还 得 为 其 进行 宣传 和 推广 。 这 可 不 是 什么 微不足道 的 小 任务 ， 而 且 很 可 能 
还 会 经 常 遭 遇 到 其 他 更 为 紧迫 、 优 先 级 更 高 、 更 直接 面 对 客 户 的 项 目的 排挤 。 


O wiki 一 词 来 源 于 夏威夷 语 wee kee wee kee， 意 思 是 “ 快 ”。 它 其 实 是 一 种 在 网 络 上 开放 、 可 
供 多 人 协同 创作 的 超 文本 系统 ， 由 wiki 之 父 Ward Cunningham 于 1995 年 所 创 。 基 本 上 ， 
wiki 包含 一 套 能 简易 制作 、 修 改 HTML 网 页 的 系统 ， 再 加 上 一 套 记 录 和 编排 所 有 改变 的 系 
统 ， 并 且 提 供 还原 改 变 的 功能 。wiki 网 站 允许 任何 造访 者 轻松 地 添加 、 删 除 、 编 辑 所 有 的 
内 容 ， 而 且 通 常 都 不 用 登录 ， 因 此 特别 适合 团队 合作 的 写作 方式 。 


2.2 组 件 


不 过 ， 模 式 库 构 建成 功 以 后 ， 它 带 来 的 回报 将 远 远 超过 构建 时 所 付出 的 努力 。 
如 果 对 茶 个 交互 的 外 观 或 功能 有 疑问 ， 开 发 团队 可 以 立刻 派 开发 人 员 来 回答 问 
题 。 而 且 模 式 是 可 重用 策略 的 核心 板块 ， 随 着 它 的 就 位 ， 设 计 师 们 就 能 避免 在 
已 经 非常 普遍 的 方案 上 浪费 时 间 ， 而 把 更 多 的 精力 用 来 迎接 项 目 中 那些 更 为 独 
特 的 挑战 。 


2.2 组件 


要 想 介 绍 组 件 ， 也 许 最 简单 的 办 法 就 是 直接 引用 其 倡导 者 、EightShapes 
公司 网 站 上 的 解释 (参见 http://unify.eightshapes.com/users-guide/what-you-get/ 


wireframe-components/) : 


组 件 是 页 面 设计 的 一 部 分 。 


组 件 由 通用 的 最 基层 元 素 (例如 文本 、 链 接 、 按 钮 、 复 选 框 和 图 片 ) 相 组 
合 而 成 ， 它 们 是 在 页 面 的 界面 设计 中 可 以 使 用 (或 重复 使 用 ) 的 有 意义 的 
组 成 单元 。 其 他 描述 这 种 页 面 内 集合 的 常用 术语 包括 模块 、 元 件 、 控 件 ， 
其 至 是 分 子 。 


而 在 Nathan Curtis 的 一 次 演讲 “Creating a Component Library”( 创 造 组 件 
资源 库 ) 中 ， 其 释义 也 大 致 类 似 : 


鉴于 我 们 通常 都 以 一 个 完整 页 面 或 页 面 状态 为 单位 来 观察 ， 同 时 把 页 面 
上 无 法 继续 划分 的 部 件 (例如 一 个 logo、 页 首 图 片 或 者 按钮 ) 称 为 “元 
素 ” 一 一 我 们 可 以 说 ， 组 件 是 由 元 素 相 互 组 合 而 成 的 具有 明确 目的 、 可 重 
用 的 独立 结构 。 标 签 式 导航 条 、 搜 索 结 果 、 文 章 内 容 都 是 组 件 。 
模式 一 般 都 能 在 各 网 站 间 通 用 ， 而 组 件 则 只 对 应 特定 的 某 一 个 网 站 ， 非 常 
具体 。 模 式 适 合 于 交互 设计 师 和 其 他 运用 草图 、 线 框图 或 其 他 基础 手段 进行 构 
思 的 人 ， 而 组 件 则 专用 于 那些 负责 构建 这 些 设计 的 人 。 它 们 的 代码 完整 ， 能 够 
重复 使 用 ， 而 且 一 个 模式 可 以 派生 出 多 个 组 件 。 开 发 人 员 只 需要 把 某 个 组 件 直 
接 插 和 人 到 页 面 中 ， 定 制 其 中 的 内 容 ， 就 可 以 得 到 一 个 完整 的 页 面 区 域 。 
2.2.1 组 件 六 要 素 
组 件 资 源 库 目前 还 不 是 十 分 流行 ， 因 此 对 现 有 资源 的 调查 和 最 佳 案例 的 推 


® Nathan Curtis 是 EightShapes 的 创始 人 之 一 〈 见 本 章 第 3 段 )。 目 前 他 已 经 创建 了 一 个 基于 组 
件 的 模块 化 体系 ， 面 向 规模 各 异 的 开发 团队 ， 客 户 包括 Comcast, Sun, Discovery, Cisco, 
eBay 等 。 个 人 博客 是 http:/nathancurtis.com 。 
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测 尚 不 足以 得 出 完善 的 结论 。 我 们 暂时 以 Sun 公司 网 站 中 提供 的 公用 组 件 资源 
库 为 例 ， 列 出 以 下 需要 包括 的 六 要 素 (更 多 内 容 参 见 2.2.2 节 )。 


1. 组 件 名 称 

在 Sun 的 资源 库 中 ， 组 件 名 称 都 是 以 页 面 标 题 的 形式 来 展现 的 。 不 过 在 模 
式 资 源 库 里 ， 也 可 以 包含 一 个 更 为 精确 的 “组 件 名 称 ” 项 ， 提 供 一 系列 可 供 替 
换 的 名 称 。 

2. 组 件 版 本 号 

组 件 的 版 本 号 与 组 件 名 称 和 示例 (参见 后 文 描 述 ) 的 标题 密切 相关 。 和 软 
件 更 新 时 的 发 布 版 本 说 明 一 样 ， 版 本 号 可 以 翔实 地 记载 从 一 个 版 本 到 下 一 个 版 
本 中 发 生 的 变化 。 如 果 需 要 对 之 前 实现 的 内 容 进 行 更 新 ， 版 本 号 能 引起 开发 人 
员 的 注意 ， 而 且 确 保 开发 团队 能 维持 系统 的 一 致 性 和 连贯 | 

3. 定义 

类 似 于 模式 里 面 的 “描述 ”项 ， 组 件 的 “定义 ”会 描述 组 件 的 目的 和 用 途 。 
在 图 2-5 中 ， 组 件 B01 Features 的 定义 如 下 : 


首页 专题 是 sun.com 网 站 首页 中 一 个 较为 复杂 而 又 重要 的 部 分 。 它 可 以 看 


作 是 首页 推介 元 素 的 容器 ， 循 环 显示 首页 推介 的 3 个 专题 内 容 。 
4. 使 用 方法 


“使 用 方法 ”项 描述 了 组 件 应 于 何 处 使 用 ， 并 包含 相关 信息 。 在 Sun 的 
“DOS Primary Index Nav”( 基 本 索引 导航 ) 页 面 中 ， 其 使 用 方法 如 下 : 


在 任何 索引 页 上 使 用 。 如 果 没 有 额外 内 容 ， 可 以 选择 是 否 加 入 See All C 
看 所 有 ) 链接 。 


该 组 件 被 限制 只 能 在 索引 页 上 使 用 ， 同 时 可 以 从 两 种 方式 中 选择 一 种 来 实 
Hi: 带 See All 链接 或 者 不 带 。 使 用 方法 项 注 明 了 这 两 点 内 容 。 


5. 示例 


示例 为 我 们 提供 了 一 个 鲜 活 、 生 动 的 组 件 实例 。 组 件 是 经 过 实现 后 的 页 面 
元 素 ， 因 此 在 基于 网 页 的 文档 中 ， 你 完全 可 以 添加 那些 带 有 完整 功能 的 版 本 。 
通过 实际 的 示例 ， 团 队 内 部 的 所 有 人 都 能 直观 地 了 解 该 组 件 的 工作 方式 〈 它 还 
能 协助 质保 小 组 审核 已 实现 版 本 的 正确 性 )、 外 观 ， 以 及 要 实现 它 应 使 用 何 种 
代码 。 


2.2 组 件 


m Code £ Specs Guidelines Assets 


Home > Web Design > Components > 


B01 Features Mat an 


Page Regions M Tags $ A-z 目 Search 
Include: 2 Developer JE 
加 Homepage Features 


Definition 
The homepage feature is a complex and important part of the sun.com homepage. It displays the rotating main features and serves as a container for the 3 
homepage promos. 


Usage 
Used only on the homepage 
Show all Templates 


E Homepage Features Sample || Code _ Templates (1) 


Used to show the feature stories on the homepage. This component also is a container for the B5 homepage promos. 


When using this component the "feature1" IMG has the SRC set normally, however the "feature2" and "feature" IMG tags are a little bit different. They 
have the SRC set to a spacer gif (a.gif) and an added TITLE attribute where the real image source is used. In addition, the "feature2" and "feature3* IMG 
tags also have a class set to "postload". This is done for performance reasons. Since the feature images are the largest files on the homepage we use 
javascript to read the IMG's TITLE attribute which then replaces the spacer gif -after- the rest of the page has loaded. This way users won't be bogged 
down by the hidden features while loading the page. 


The "More" and "More Featured Articles" text may be translated as needed. 


4 » 113 | > More b05 content here 


> » View All Promotions 


JAVA GETS BETTER 


FASTER. EASIER, ‘ 


Neywáva Platform Standard Editioh 6 with 
enhanced functionality and NetBeans IDE 5.5 
released today and available now. 


Read the News 
Get Java SE 6 Now 
Learn More 


Contact | About Sun | News & Events | Employment | Site Map | Privacy | Terms of Use | Trademarks | Copyright 1994-2006 Sun Microsystems, Inc. 


6. 代码 


除了 一 个 能 运行 的 示例 之 外 ， 组 件 文档 中 还 应 该 包含 一 个 “代码 ”项 ， 链 接 
到 该 组 件 的 已 实现 版 本 (包括 使 用 不 同 编程 语言 的 版 本 )。 如 果 某 个 开发 团队 用 
Ruby on Rails 开发 了 一 个 应 用 程序 ， 用 苹果 的 Cocoa 开发 了 另 一 个 ， 而 两 者 
都 可 以 使 用 这 个 组 件 ， 那 么 它 的 代码 项 就 应 当 包 括 用 这 两 种 语言 创建 的 版 本 。 


O Ruby on Rails 简称 为 RoR 或 Rails， 是 一 个 用 Ruby 语言 写 的 、 严 格 按照 MVC 结构 开发 的 

开源 网 络 应 用 框架 。Ruby on Rails 由 David Heinemeier Hanson 从 37 Signals 公司 的 项 目 管理 
工具 BaseCamp 里 面 分 离 出 来 ， 并 于 2004 4E 7 月 以 开源 方式 发 布 。 由 于 开发 人 员 可 以 专注 
于 应 用 程序 自身 的 设计 ， 省 去 那些 花 在 了 解 及 配置 基础 框架 上 面 的 时 间 ，Ruby on Rails 在 
发 布 之 后 短 时 间 内 就 迅速 受到 很 多 开发 人 员 的 欢迎 。 

© Cocoa 是 苹果 公司 为 Mac OS X 操作 系统 所 创建 的 面向 对 象 的 编程 环境 ， 与 Carbon 和 Java 
处 于 同一 层 。 它 从 20 世纪 80 年 代 NeXT diia NeXTSTEP 和 OPENSTEP 演变 而 
来 ， 包 含 一 组 面 对 对 象 的 软件 库 以 及 一 个 运行 环境 ， 而 且 它 还 与 其 他 的 应 用 程序 环境 共用 
一 个 集成 开发 环境 。 


图 2-5 
Sun.com 的 一 份 
组 件 文档 
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2.2.2 ”组 件 资源 库 


组 件 资源 库 可 以 用 和 模式 库 同样 的 方式 来 构建 和 发 布 一 一 建立 wiki， 标 识 
已 完成 的 组 件 实例 ， 然 后 为 其 存档 备案 。 


如 图 2-6 所 示 ，Sun 公司 的 网 站 提供 了 一 个 公用 的 组 件 资源 库 ， 可 以 作为 
组 件 如 何 存 档 的 参考 。 你 能 在 www.sun.com/webdesign 上 找到 这 个 资源 库 。 


2-6 
Sun.com 组 件 资 L Sun Web Design 
源 库 的 页 ， 网 Design System Code&Specs Guidelines Assets 
XE ww w.sun. Home » Web Design » 
com/webdesign . = . 
Web Design ZT oR A 
Web Design Standards covers editorial, visual design and production specifications for creating Related Resources 
website pages for all of Sun's customer- and partner-facing web properties excepting java.com. External Resources 
» Sun Brand Extranet 
Learn the Basics & Internal Resources 
» Structuring Pages » User Interface 
Learn the layout: from the global nav to page titles to banners, tabs and side navigation. Standards 


Guidelines for buttons, 
links, headings, error 
messages and more 


Explore Components » Writing for the Web 


Guidelines and best 
Page Regions Tags AZ Search Include: E a practices for web writing 


|| 
= 


[一 Page Regions define where » Streaming Audio & 
=a components go on a page. Video Standards 
= Roll over the page region 
thumbnails to find out more » Java.com Content 
about each region. Request Process 
= Cantfind the component you » eCampaign Resources 


are looking for? Help us Promote your Sun 
Improve program via eMail, 


eNewsletters and other 
online marketing 
vehicles. 
Daa [x] » Web Experience Design 
P R F 
LLLI] Ln A REQUIRED STEP for 


all significant new 


(re)designs or updates. 
Filling out the form 
—" engages the .Sun Web 
Embrace the Guidelines, Get the Goods Penance team on your 
Publishing & Coding Downloads & Libraries poison 
» Creating PDFs » Global Assets Request (/css, /js, /im) » Web Application 
» Colors » Graphics Library Oe are for 
» HTML » Banners designing browser-based 
» Type & Trademarks » Homepage Kits Sun applications. 
» Graphics » Icons & Images eons 
» Scripting » Favicons Dasign and publishing 
» Meta Tags » CSS guidelines for Sun's 
» Multimedia Intranet. 


Copyright 1994-2009 Sun Microsystems, Inc 


而 最 有 帮助 的 是 ，Sun 还 提供 了 一 个 有 关 如 何 使 用 组 件 的 页 面 《参见 http:// 
Www.Sun.com/webdesign/structuring-pages.html)， 以 一 个 标准 的 Sun 内 容 页 面 模 
板 为 例 ， 对 其 中 的 各 个 区 域 进 行 了 直观 的 描述 。 同 时 它 还 提供 了 一 个 用 这 些 组 
件 构 建 的 页 面 示例 (参见 http:/www.sun.com/software/products/mysql/index.jsp )。 
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此 外 ，Nathan Curtis 也 在 SlideShare.net ^ 上 发 布 了 他 的 “Creating a Compo- 
nent Library” 演 讲稿 。 网 址 是 http://www.slideshare.net/nathanacurtis/creating-a- 


component-library-298610. 
2.3 ”交互 设计 框架 体系 


在 互联 网 上 可 能 存在 着 数 百 万 个 设计 模式 ， 它 们 每 天 都 在 被 人 使 用 ， 其 中 
一 些 很 流行 。 就 此 而 言 ， 它 们 似乎 就 是 所 谓 的 界面 模块 的 理想 “后 备 ”， 但 其 实 
模式 仍然 存在 着 一 些 无 法 摆脱 的 局 限 。 


设计 模式 能 够 解决 那些 范围 较 小 的 具体 问题 〈 这 也 正 是 我 们 期 待 的 结果 )， 
但 是 我 们 无 法 从 中 得 知 这 些 问题 之 间 是 否 有 联系 、 是 否 会 顾此失彼 。 尽 管 在 一 
般 的 模式 描述 文档 中 有 一 个 上 下 文 情境 项 ， 但 它 也 只 是 讨论 了 模式 能 在 何 处 适 
用 ， 其 中 既 没 有 提 到 该 模式 会 如 何 影响 整个 应 用 程序 ， 也 没有 提 到 它 和 系统 其 
余部 分 的 联系 。 而 在 必 备 条 件 项 中 ， 也 只 是 列 出 了 与 该 模式 密切 相关 的 其 他 模 
式 ， 并 没有 揭示 其 表面 下 的 深层 原因 。 


我 们 希望 创造 出 成 功 的 设计 ， 然 而 设计 模式 缺乏 足够 的 上 下 文 信息 ， 为 我 
们 留 下 了 许多 悬而未决 的 问题 。 每 个 页 面 应 该 显示 多 少 条 搜索 结果 ? 应 该 如 何 处 
理 错 误 〈 例 如 用 户 输入 错误 或 者 零 结果 搜索 ) ?用 户 怎 样 才能 开始 新 搜索 ? 每 条 
结果 应 该 提供 多 少 信 息 ? 哪些 信息 更 为 重要 ? 单 赁 模式 是 无 法 回答 这 些 问 题 的 。 


比如 ， 分 页 界面 能 让 用 户 从 一 个 页 面前 往 另 一 个 页 面 ， 然 后 还 能 再 回来 。 
这 的 确 解决 了 一 个 问题 ， 为 一 个 操作 提供 了 支持 。 然 而 要 想 追 求 可 用 的 设计 ， 
还 有 很 多 其 他 问题 需要 考虑 。 

要 想 回答 这 些 问题 ， 我 们 不 能 只 着 眼 于 分 页 界面 ， 而 必须 考虑 整个 搜索 系 
统 。 换 言 之 ， 我 们 不 能 只 依赖 于 设计 模式 ， 而 必须 了 解 模式 是 如 何 构成 系统 ， 
而 系统 又 是 如 何 构成 整个 应 用 的 。 

那么 组 件 呢 ?从 本 质 上 来 说 ， 它 们 也 只 是 某 个 公司 (或 组 织 ) 定义 的 模式 
的 代码 完成 版 本 而 已 ， 因 此 也 同样 爱 莫 能 助 。 

要 想 回答 这 些 问题 ， 我 们 需要 审视 可 重用 铁 三 角 中 凌驾 于 设计 模式 之 上 的 
更 高 层次 : 交互 设计 的 框架 体系 。 


O SlideShare.net 是 一 个 发 布 、 分 享 演讲 稿 或 幻灯 片 的 网 络 社区 ， 有 些 类 似 于 YouTube. JAF 
能 在 其 中 上 传 或 下 载 幻灯 片 或 PDF 文档 ， 为 幻灯 片 插入 同步 的 声音 ， 还 能 将 幻灯 片 朋 入 到 
博客 、 个 人 网 站 以 及 类 似 LinkedIn、Facebook 和 twitter 等 社交 网 站 中 。 
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signup? 的 注册 框 
架 文档 


2.3.1 ”交互 设计 框架 体系 包含 的 元 素 


框架 体系 的 结构 与 设计 模式 类 似 。 实 际 上 ， 我 们 把 框架 体系 视 为 设计 模式 
在 逻辑 上 的 进化 结果 ， 它 是 我 们 构建 一 系列 成 熟 解 决 方案 的 下 一 个 必 经 步 又 。 


本 书 所 呈现 的 框架 体系 就 是 我 们 推荐 大 家 使 用 的 


E 架 体系 ， 包 括 名 称 、 描 述 、 


在 何 处 使 用 它们 以 及 如 何 使 用 ， 等 等 。 简 而 言 之 ， 每 一 个 框架 体系 都 会 包含 本 
节 所 述 的 部 分 或 者 全 部 内 容 ， 如 图 2-7 所 示 。 


Head back to rhjr.net! 


Web Anatomy 


search 


Resources 


About frameworks 
Subscribe to updates 
Contact 


Tweet this! 


Tweet about this site! 


Frameworks 


Catalog 

Shopping cart 

Order management 

Search 

Sign-up 

Reputation 

About Us 

Profile / Account management 
Movie sites (niche example) 
Microsite 


Sign-up 
Description 


The purpose of the sign-up framework is to convince visitors to 
register and become subscribers. Active members. Paying customers. 
Its intention is not only to address objections that site users may have 
prior to signing up, but also, and perhaps more importantly, to entice 
them. 


In essence, the sign-up framework exists purely to persuade, and then 
to enable a user to act on his new impulse to dive in. 


Context of Use 


The sign-up framework applies to applications that require users to 
register in order to save, publish, store, or otherwise take ownership of 
or manage the content they create. These applications are often 
presented as stand-alone sites that visitors can access for the first 
time only via top-level marketing pages, such as the home page or a 
Learn More page. However, applications like this can also exist simply 
as a section of a larger site. 


Task Flow 


Typically, a user explores the home page and possibly a Learn More or 
Features page, scans any relevant (and short) descriptions, and at 
some point accesses the registration process. He then completes the 
registration form, is confirmed as a new member, and then begins 
using the application. An alternative task flow, as discussed in the 
"Blank Slate” section, is one in which the user can begin using the 
application before registering, only being asked to register once it is 
absolutely necessary to continue. 


Where Used 


Blinksale 
Basecamp 


Elements 


Value Proposition 

Investment Breakdown 

Testimonial 

Call to Action 

Blank Slate / Immediate Engagement 
Registration form 


Design Criteria 


Communicate a clear value proposition 
Set expectations 

Demonstrate that it works well 
Encourage action and enable progress 
Associate the user to the user's actions 


Source Files 


Balsamig Mockups (45kb) 


O 这 是 本 书 作 者 Robert Hoekman Jr. 在 他 的 个 人 网 站 Chttp://rhjr.net) 上 为 本 书 


站 ， 列 出 了 书 中 涉及 的 所 有 5 个 框架 范例 。 


的 资源 网 
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除 此 之 外 ， 我 们 还 将 讨论 这 些 框架 体系 所 能 满足 的 用 户 需 求 ， 以 及 相关 的 
人 类 行为 ， 同 时 还 会 探索 解决 这 些 设计 问题 的 各 种 途径 。 此 举 是 为 了 让 你 能 次 
刻 地 理解 在 你 自己 的 项 目 中 应 用 框架 体系 时 应 当 考 虑 什么 ， 以 及 如 何 充分 利用 
从 中 归纳 出 的 设计 标准 。 


当然 ， 你 也 没有 必要 为 自己 的 每 一 个 框架 体系 都 总 结 出 一 篇 见解 次 刻 的 论 
文 。 实 际 上 ， 框 架 体 系 文档 的 复杂 程度 和 模式 文档 相当 即 可 。 


只 要 遵循 以 下 各 项 就 可 以 了 。 
1. 描述 


描述 项 不 仪 描述 了 框架 本 身 〈 这 是 其 首要 目的 )， 同 时 也 描述 了 框架 应 满足 
的 需求 。 例 如 在 下 一 章 将 介绍 的 目录 框架 ， 它 描述 了 人 们 在 选择 目标 时 必 经 的 
三 个 步骤 ， 而 这 一 事实 也 正 是 目录 框架 存在 的 原因 ， 因 为 它 对 该 行为 提供 了 直 
接 的 支持 。 


在 本 书 每 个 框架 的 描述 项 中 ， 我 们 都 尽力 填 括 这 类 信息 。 但 在 你 构建 自己 
的 框架 资源 库 时 ， 仅 仅 照 本 宣 科 是 不 够 的 ， 必 须 加 以 变化 。 关 键 是 要 了 解 你 希 
望 框架 做 什么 。 目 录 框 架 支持 的 是 人 们 选择 对 象 的 过 程 ， 搜 索 框 架 支 持 的 是 导 
航 未 能 提供 帮助 时 寻找 内 容 的 过 程 ， 注 册 框架 则 辟 励 用 户 从 访问 者 转变 为 客 
户 。 


d 


2. 上 下 文 情 境 


该 项 描述 了 在 使 用 给 定 框架 时 用 户 可 能 遇 到 的 问题 ， 或 者 他 们 和 希望 满足 的 
需求 。 例 如 ， 当 某 个 用 户 面 对 一 个 必须 登录 才能 使 用 的 Web 应 用 就 好 像 一 个 
四 周 都 是 围墙 的 花园 ) 时， 可 能 会 考虑 是 否 值得 去 注册 。 而 注册 框架 将 会 处 理 
此 时 用 户 心中 产生 的 各 种 疑问 。 它 会 介绍 该 应 用 的 功能 和 优点 ， 注 册 时 须 付 出 
的 努力 或 成 本 ， 以 及 如 何 开始 注册 ， 等 等 。 


除 此 之 外 ， 该 项 还 会 描述 框架 在 网 站 信息 架构 中 所 处 的 位 置 。 例 如 注册 框 
架 经 常会 在 顶级 的 市 场 营 销 页 面 中 出 现 。 

3. 任务 流程 

许多 框架 通常 都 由 一 系列 按 顺 序 排列 的 交互 构成 。 其 中 一 些 还 会 提供 必要 
的 信息 ， 用 户 只 要 参考 这 些 信息 就 能 自己 解决 产生 的 疑问 。 在 这 种 情况 下 ， 用 
户 必须 遵守 特定 的 任务 流程 。 任 务 流程 部 分 所 描述 的 正 是 这 些 内 容 。 
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当然 也 有 例外 ， 例 如 那些 针对 特定 主题 的 网 站 比如 电影 网 站 ， 参 见 第 7 
章 )， 或 者 其 他 根据 惯例 相 结 合 ， 提 供 完 备 解决 方案 的 模式 集合 。 一 个 典型 的 电 
影 网 站 包括 一 个 预告 片 视频 、 演 职员 信息 、 剧 情 梗概 以 及 其 他 内 容 。 这 种 网 站 
本 身 通常 不 会 包含 任务 〈 至 少 用 户 访问 这 类 网 站 不 是 为 了 完成 工作 任务 )， 因 此 
任务 流程 部 分 对 于 电影 网 站 的 框架 来 说 并 不 重要 ， 因 此 也 不 会 被 包括 进来 。 但 
是 框架 是 仍然 存在 的 ， 因 为 这 些 元 素 相互 协作 ， 共 同 实现 了 电影 网 站 的 目标 ， 
也 就 是 劝说 访问 者 来 看 这 部 电影 ， 所 以 它们 构成 了 框架 。 


4. 其 他 必 备 框架 


其 他 必 备 框架 一 项 列 出 了 与 当前 描述 的 框架 配合 使 用 时 不 可 或 缺 的 其 他 框 
架 。 例 如 ， 一 个 电子 商务 框架 可 能 由 网 站 中 特定 于 产品 销售 与 服务 的 元 素 构成 
(出 于 本 书 的 目的 ， 我 们 将 它 与 目录 框架 进行 了 整合 )。 然 而 ， 为 了 更 好 地 支持 
该 过 程 中 的 任务 ， 电 子 商 务 框架 还 需要 其 他 框架 的 配合 : 搜索 框架 ， 提 供 寻 找 
商品 的 第 二 渠道 ， 购 物 车 框架 ， 用 于 人 处 理 购买 信息 ， 付 款 框 架 ， 用 于 付款 结算 。 
这 些 都 是 电子 商务 框架 的 其 他 必 备 框架 。 


5. 相关 框架 


相关 框架 指 的 是 那些 与 当前 描述 的 框架 有 着 相似 的 目的 或 者 支持 相似 的 用 
户 或 业务 目标 的 框架 。 除 了 搜索 框架 和 购物 车 框架 之 外 ， 一 个 电子 商务 网 站 通 
常 还 会 包括 一 个 订单 管理 系统 和 顾客 账户 系统 。 这 些 系 统 可 以 作为 框架 进行 存 
档 和 备案 ， 然 后 在 相关 框架 项 中 进行 相互 链接 。 

6. 构成 元 素 

构成 元 素 项 是 一 个 框架 中 最 重要 的 两 个 部 分 之 一 〈 另 一 个 是 设计 标准 项 ， 
参见 下 文 )， 因 为 它 列 出 了 所 有 从 属于 该 框架 的 设计 模式 。 在 后 面 五 章 中 你 将 会 
发 现 ， 构 成 元 素 是 框架 体系 的 主要 组 成 部 分 ， 该 项 中 列 出 的 所 有 模式 都 会 指向 
各 自 的 详细 文档 。 正 是 通过 这 种 方式 ， 框 架 资 源 库 包 庄 在 模式 资源 库 之 外 ， 与 
模式 资源 库 紧密 地 结合 在 一 起 我们 将 在 2.3.3 节 中 进行 深入 讨论 )。 虽 然 我 们 
说 是 框架 体系 (而 不 是 模式 ) 构筑 了 整个 上 下 文 情境 ， 为 最 终 的 解决 方案 指明 
了 方向 ， 但 它们 依然 主要 由 模式 构成 。 

没有 模式 的 框架 是 不 存在 的 。 二 者 相辅相成 、 紧 密 协 作 。 

7. 设计 标准 
框架 体系 文档 中 的 另 一 个 重要 元 素 是 设计 标准 项 ， 它 列 出 了 框架 中 一 系列 
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设计 的 导向 性 方针 。 这 听 上 去 也 许 简 单 ， 但 它 可 能 是 整个 框架 中 最 难以 准确 界 
定 的 部 分 。 


设计 标准 准确 地 标识 出 为 了 网 站 用 户 而 必须 实现 的 目标 ， 形 成 一 系列 如 规 
章 制 度 般 的 指示 ， 表 达 了 设计 背后 的 动机 。 


例如 ， 注 册 框 架 〈 参 见 第 5 章 ) 包含 以 下 设计 标准 : 


O 表达 了 明确 的 价值 声明 ; 
建立 起 用 户 的 预期 ; 

证 明 本 应 用 程序 运转 良好 ; 

葡 励 行动 并 确保 获得 进展 ; 

让 用 户 与 其 操作 相 联系 。 

每 一 条 标准 都 是 针对 设计 的 指令 。 

之 所 以 要 列 出 设计 标准 ， 有 两 个 很 重要 的 原因 。 


首先 ， 框 架 体系 能 让 我 们 逆向 设计 人 类 的 行为 ， 而 这 种 理解 正好 能 通过 种 
种 设计 标准 表达 出 来 。 定 义 设计 标准 能 帮助 我 们 更 加 深刻 地 理解 框架 的 价值 ， 
也 只 有 这 样 ， 你 在 自己 的 项 目 中 应 用 框架 时 才能 做 到 有 的 放 矢 。 在 设计 中 ， 哪 
怕 是 最 细微 、 看 上 去 最 无 关 紧要 的 细节 ， 也 可 能 会 导致 产品 在 可 用 性 、 客 户 转 
化 率 、 操 作 愉 屏 性 甚至 产品 价值 等 方面 产生 重大 的 差异 。 标 准 能 让 我 们 知道 在 
一 个 设计 中 哪些 地 方 是 最 重要 的 ， 这 能 确保 我 们 对 设计 进行 正确 的 修改 和 调整 。 


其 次 ， 框 架 体 系 能 将 人 类 行为 映射 成 一 系列 具体 的 目标 ， 其 中 的 每 一 个 目 
标 都 有 可 能 激发 我 们 的 灵感 ， 创 造 出 新 颖 的 解决 方案 以 达到 同样 的 效果 。 而 以 
此 为 基础 的 创新 又 能 实现 整个 框架 真正 的 目标 ， 解 决 真正 的 问题 。 简 而 言 之 ， 
框架 体系 的 设计 标准 能 告诉 你 需要 实现 哪些 目标 ， 至 于 实现 的 方式 则 完全 可 以 
自由 选择 。 

本 书 共 涉 及 了 5 份 框架 文档 ， 我 们 将 以 每 份 文档 的 设计 标准 项 为 例 ， 演 示 
上 述 内 容 的 实现 过 程 一 一 如 何 运 用 与 众 不 同 、 独 一 无 二 的 方式 来 满足 某 个 标准 
框架 的 既定 目标 。 我 们 希望 这 不 仅 能 帮助 你 理解 如 何 构思 和 应 用 设计 标准 ， 还 
能 局 发 你 设计 出 充满 新 意 的 解决 方案 。 


既然 设计 标准 这 么 重要 ， 那 么 男 一 个 问题 也 随 之 出 现 ， 这 些 标准 的 产生 和 
推断 过 程 似 乎 非常 复杂 ， 令 人 费解 。 但 我 们 并 不 这 么 认为 。 


在 为 设计 制订 标准 的 过 程 中 ， 唯 一 的 守门 就 是 自问 这 个 框架 能 为 你 或 者 
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图 2-8 
GetBallpark .com 
上 的 价值 声明 

元 素 


第 2 章 可 重用 铁 三 角 


站 的 其 他 用 户 带 来 什么 。 


比如 ， 要 想 知 道 注册 框架 为 我 们 带 来 了 什么 ， 先 浏览 一 下 该 框架 中 包含 
的 元 素 。 其 中 一 个 元 素 就 是 价值 声明 (value proposition) 一 一 几乎 每 一 个 要 
求 用 户 注 册 的 网 站 上 都 会 出 现 。 如 图 2-8 所 示 ， 有 关 估 价 和 结算 的 Web 应 用 
Ballpark ^ Cwww.getballpark.com) 就 在 网 站 中 使 用 了 “让 您 能 更 方便 地 发 送 预 
算 单 和 结算 单 ” 这 样 一 条 语句 。 那 么 这 段 陈 述 为 我 们 带 来 了 什么 呢 ? 很 明显 ， 
它 的 目的 是 为 了 表现 该 Web 应 用 的 价值 ， 告 诉 用 户 这 个 应 用 有 什么 用 ， 以 及 它 
为 什么 很 重要 。 在 这 个 例子 中 ， 框 架 中 的 某 个 元 素 和 某 条 设计 标准 包含 了 同一 
个 词 。 该 元 素 被 称 为 价值 声明 ， 而 设计 标准 则 能 明确 地 表达 价值 声明 。 换 句 话 
说 ， 有 时 候 元 素 仅 仅 只 是 为 了 满足 某 条 设计 标准 而 存在 的 。 


The better way to send estimates + invoices 


DD CAT m. D 
( board 28 Lo + C Sottings Logout 


Recent Activity + New Estimate + New Invoice — 
Open Estimates: 
$318,325.00 

MED Amazon invoice: Kindle Visual Bookshelf Web Application 

Payment of $43,250.00 receives by Gary Johnsen ~ Won This Month 
$4,500.00 

Re: Apple - Estimate: Redesign of the Appie Online Store 


Posted by Cary johnson - ie 


We got It Congratulations guys! $184,436.25 
Received Ths Monn 
QDD Appie. Estimar»: Redesign of the Appie Ondine Store $43,200.00 
Status updated by Cary Johnson - Moments Ago Received Last Mont 
$0.00 
e 


invoice: Kindie Visual Bookshelf Web Application 


— Received Year to Daw: 
Sect to jeff Bezos by Cary Johnson - Moments Ago. $43,250.00 


而 另 一 个 注册 元 素 〈 将 在 第 5 章 进 行 讨 论 )， 就 是 注册 表单 本 身 。 注 册 表 单 
能 让 用 户 创建 账户 ， 这 非常 明显 。 但 是 ， 从 这 一 事实 中 我 们 能 推断 出 什么 样 的 
设计 标准 呢 ? 要 想 解 决 这 个 问题 ， 请 先 自问 用 户 为 什么 必须 注册 。 用 户 必须 注 
册 ， 只 有 这 样 才 将 让 他 们 在 网 站 上 执行 的 操作 和 他 们 自身 “ 绑 ” 在 一 起 ， 使 他 
们 在 下 次 登录 时 能 够 找到 之 前 的 数据 、 进 行 个 性 化 的 定制 ， 等 等 。 那 么 该 框架 
的 又 一 条 设计 标准 出 现 了 ， 那 就 是 “让 用 户 和 他 们 的 操作 相 联系 ”。 

而 搜索 框架 〈 参 见 第 4 章 ) 则 可 能 是 一 个 较为 复杂 的 例子 ， 因 为 框架 中 的 
元 素 并 没有 明显 地 表现 出 它们 各 自 的 用 途 。 如 果 要 为 一 个 有 效 的 搜索 系统 设计 
设立 标准 ， 你 首先 必须 了 解 人 们 搜索 的 原因 。 有 时 候 ， 网 站 的 导航 无 法 呈现 给 


O Ballpark 是 一 个 网 络 在 线 应 用 。 那 些 通过 网 络 提供 服务 的 公司 或 个 人 《例如 设计 工作 室 或 自 
HEAD 可 以 在 线 制订 项 目 预算 ， 与 客户 协调 ， 通 过 PayPal 进行 结算 并 获得 报酬 。 
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用 户 想 看 的 内 容 ， 而 为 了 弥补 这 一 点 ， 搜 索 提供 了 找到 内 容 的 第 二 种 途径 。 但 
是 ， 如 果 用 户 自 认 能 带 来 帮助 的 关键 字 并 不 在 寻找 的 内 容 之 中 ， 那 么 这 第 二 种 
途径 很 容易 失败 。 因 此 ， 设 计 标 准 变 成 了 : 将 内 容 和 用 户 的 用 词 进行 关联 。 如 
果 你 没有 理解 人 们 为 什么 搜索 、 以 及 是 什么 让 搜索 能 够 成 功 ， 那 么 将 很 难得 到 
上 述 的 结论 。 但 话 又 说 回来 ， 如 果 相 关 的 问题 已 经 过 很 好 的 研究 ， 那 么 只 要 经 
过 一 些 细致 的 调查 ， 你 目 己 也 能 得 到 答案 。 所 以 ， 首 先 自问 有 哪些 因素 有 助 于 
成 功 搜索 ， 你 就 能 找到 线索 ， 然 后 将 其 加 入 到 设计 标准 中 去 。 

的 确 ， 有 些 标准 会 比 其 他 标准 更 难 发 现 。 但 通过 以 上 的 解释 ， 我 们 希望 你 
能 明白 在 这 个 过 程 中 除了 提出 问题 ， 然 后 将 答案 转化 为 相关 标准 之 外 ， 并 没有 
其 他 复杂 之 处 。 


在 接 下 来 五 章 的 设计 标准 部 分 都 会 前 明 当 存档 自 定 义 框架 时 如 何 做 到 这 一 
点 。 


与 此 同时 ， 让 我 们 转 而 看 看 框架 更 为 概念 化 的 一 面 一 一 让 框架 行 之 有 效 的 


哲学 基础 。 
2.3.2 ”框架 体系 的 特质 


著名 的 信息 架构 师 Liz Danzico ? (Happy Cog Studios®, Bobulate.com) 
经 做 过 一 次 题 为 “The Framework Age”( 框 架 时 代 ) 的 演讲 。 演 讲 的 主题 是 
Web 设计 师 们 已 经 抛弃 了 严格 支持 剧本 化 的 用 户 行为 的 设计 ， 转 而 开始 为 之 设 
计 一 种 弹性 的 平台 。Liz 的 演讲 重点 关注 于 一 种 不 断 变化 的 网 页 范 型 ， 这 和 本 书 
并 无 联系 ; 但 在 演讲 的 过 程 中 ， 她 提 到 了 用 户 定义 框架 的 3 个 特质 。 


为 了 说 明 这 些 特 质 ，L 这 谈 到 了 证 典 音乐 和 莫 达 尔 严 士 乐 之 间 的 区 别 。 


她 解释 到 ， 在 古典 音乐 中 ， 每 一 个 音符 都 是 既定 的 。 作 曲 家 敏 费 苦心 地 为 
每 一 件 乐 右 谱写 乐曲 的 每 一 个 小 方 中 的 每 一 个 音符 。 要 想 成 为 大 师 级 的 乐 手 ， 
技巧 、 风 度 和 个 人 特色 当然 都 很 重要 ， 但 从 根本 上 来 说 ， 任 何 乐 手 都 得 有 能 
和 有 自制 力 来 演奏 出 那些 音符 。 每 一 次 都 必须 完美 、 准 确 。 在 古典 音乐 中 ， 只 要 
有 一 个 音符 出 现 错误 ， 那 就 是 失败 。 


O Liz Danzico 具有 设计 师 、 教 育 工 作者 、 编 辑 、 信 息 架构 师 等 多 个 头衔 ， 同 时 她 在 Happy 
Cog Studios 任用 户 体验 顾问 。 
@ Happy Cog Studios 是 一 个 网 站 设计 公司 ， 为 客户 提供 网 站 架构 、 界 面 设 计 、 品 牌 塑造 以 及 
内 容 开 发 等 多 方位 的 服务 。 客 户 包括 Mozilla, WordPress, Blogger 等 。 公 司 网 站 是 http:// 


www.happycog.com. 
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然而 需 士 乐 ? 则 完全 不 同 。 而 莫 达 尔 锅 士 乐 ? 更 是 极端 中 的 极端 。 


在 录制 那 张 首开 先河 的 唱片 Kind of Blue ?之 前 ， 传 奇 小 号 手 Miles Davis ? 
走 进 录音 棚 ， 拿 出 了 6 张 纸 。 在 这 些 纸 上 只 提供 了 少量 的 信息 一 一 歌曲 的 调式 、 
速度 以 及 使 音乐 不 偏离 方向 的 一 些 限制 。 除 此 之 外 什么 也 没有 。 


Miles Davis 并 没有 要 求 这 些 音 乐 家 按照 乐谱 逐个 音符 、 循 规 蹈 矩 地 演奏 ， 
而 是 让 他 们 跟随 着 律动 进行 谱 曲 。 在 演奏 中 进行 创作 。 


他 和 希望 他 们 尽情 表演 ， 即 兴 发 挥 ， 让 他 们 自己 沉浸 到 音乐 中 。 


尽管 录音 棚 里 没有 任何 人 用 这 种 方式 演奏 过 ， 但 是 他 们 作为 音乐 家 的 进化 ， 
攻 实 上 也 是 事 士 音乐 的 进化 ， 就 摆 在 面前 的 这 6 张 纸 上 。 


而 通过 Miles Davis 简单 却 具 革 命 性 的 要 求 ， 莫 达尔 琐 士 乐 ， 一 种 本 质 上 诞 
生 于 框架 的 音乐 被 推 向 了 世界 。 


每 首 乐曲 的 骨架 〈 轮 廓 、 结 构 ) 是 确定 的 ， 但 其 他 的 一 切 都 是 开放 的 。 音 
乐 家 可 以 完全 自由 地 在 框架 中 演奏 ， 试 验 ， 大 展 拳脚 。 


通过 这 个 例子 ，Liz 阐述 了 她 为 框架 定义 的 三 个 特质 。 
1. 存在 


首先 ， 框 架 是 存在 的 。 用 Liz 的 话说 ， 它 们 “可 检测 ， 却 又 不 固定 ” 这 人 名 
话 的 意思 是 说 它们 存在 ， 而 且 可 以 标识 ， 但 是 它们 的 表现 却 绝 不 是 一 成 不 变 的 。 


qlip 


O KEREP ESSE AERE CSI AR), 20 世纪 早期 产生 于 新 奥尔良 ， 基 
DARA E EEREN JARMA TIA. LEY AEREA Pe 
IR KILA AO AA PLoS BST RABO T AM. 30 FARE, MER 
吸引 了 白人 阶层 ， 同 时 诞生 了 可 重复 的 简短 旋律 模式 (riff)， 乐 手 可 以 在 这 种 riff AE 
础 上 进行 较 长 时 间 的 独奏 《多 为 即兴 )。 如 今 鼻 士 乐 已 经 成 为 一 种 主流 的 音乐 风格 ， 更 诞生 
了 无 数 技巧 出 神 人 化 的 大 师 。 

O KIKKER (Modal Jazz) 是 上 世纪 50 年 代 发 展 出 来 的 一 种 釉 士 乐 的 分 支 类 型 。 这 种 形 
TUN ARS 8 个 音符 随意 组 合 构成 不 同音 阶 ， 在 节奏 上 或 和 声 上 强调 即兴 色彩 。 演 奏 时 
乐 手 们 不 会 按照 事先 排练 好 的 乐谱 演奏 ， 而 是 赁 着 听觉 和 乐 感 自 由 即兴 发 挥 ， 甚 至 可 以 说 
是 在 演奏 中 创造 乐曲 。 

O Kind of Blue JE: Es HEYR Miles Davis 于 1959 4 8 月 出 版 的 录音 室 唱 片 。 这 张 唱片 是 
^ d WOR IRCA HIS BEER. SRC AAR, ORE. RATRAT E 
过 极 大 的 影响 。 

® Miles Dewey Davis， 小 号 手 、 荔 士 乐 演奏 家 、 作 曲 家 、 指 挥 家 ，20 世纪 最 有 影响 力 的 音乐 
人 之 一 。 第 二 次 世界 大 战 以 后 的 每 一 次 项 士 乐 发 展 运动 ，Davis RAER R. MERE 
乐 逐渐 被 人 们 所 接受 ，Davis 作品 的 影响 力 逐 渐 扩 大 ， 获 得 了 不 朽 的 声誉 和 滚滚 财源 ， 是 当 
代 成 功 音乐 人 的 典范 。 


2.3 ”交互 设计 框架 体系 


就 像 每 一 种 音乐 类 型 中 都 能 找到 框架 的 影子 一 样 ， 几 乎 在 每 一 个 纵向 市 场 中 都 
能 发 现 网 站 设计 的 足迹 。 这 使 得 它们 很 容易 被 发 现 ， 存 档 和 备案 ， 但 却 仍然 能 
根据 不 同 的 表现 而 保持 其 独立 性 。50 亿 个 搜索 系统 可 能 都 提供 了 (本 质 上 ) É 


全 相同 的 分 页 界面 ， 但 出 于 某 些 原因 ， 任 何 一 个 搜索 系统 都 会 和 其 他 搜索 系统 
存在 着 或 多 或 少 的 差别 。 可 检测 ， 却 又 不 国定 。 
2. 可 累加 


其 次 ， 框 架 是 可 累加 的 。 设 计 师 能 以 它们 为 基础 ， 针 对 具体 的 解决 方案 以 
有 效 的 方式 对 设计 的 规模 进行 缩放 ， 同 时 将 一 系列 框架 串联 起 来 ， 构 成 整个 网 
站 。 


3. 增强 表现 力 


最 后 ， 框 架 是 表现 力 的 推动 者 。 它 们 使 设计 师 能 够 为 作品 赋予 自己 的 风格 。 
自 定义 设计 ， 表 演 。 

框架 不 会 把 用 户 限 制 在 那些 生 搬 硬 套 的 规则 中 ， 它 们 人 允许 即兴 发 挥 。 尽 管 
框架 所 包含 的 元 素 始 终 不 会 有 太 大 的 变化 ， 但 就 像 设 计 模式 一 样 ， 框 架 的 每 一 
次 实现 都 必须 适用 于 相应 的 特定 环境 。 比 如 最 常见 的 搜索 结果 页 面 ， 它 已 经 成 
为 每 一 个 搜索 系统 中 不 可 缺少 的 标准 部 分 ， 但 要 想 使 用 它 ， 则 必须 考虑 整个 应 
用 的 上 下 文 情境 。 设 计 师 们 的 美学 素养 在 这 里 派 上 了 用 场 。 正 是 在 这 里 ， 设 计 
师 开 始 注入 个 人 风格 ， 调 整 细微 之 处 ， 运 用 娴熟 的 技巧 。 正 是 在 这 里 ， 设 计 师 
开始 表演 。 


4. 鼓励 创新 


因此 ， 框 架 体 系 完 全 可 以 作为 我 们 设计 的 起 点 ， 同 时 一 定 要 认识 到 ， 以 杠 
架 为 标准 并 不 代表 着 创新 精神 的 消逝 。 除 了 提供 一 整套 彼此 关联 的 界面 解决 方 
案 之 外 ， 框 架 还 能 让 我 们 领悟 如 何 提高 水 准 ， 登 上 新 的 台阶 。 


看 看 当今 主流 的 在 线 零 售 网 站 。 你 也 许 已 经 注意 到 ， 它 们 都 在 使 用 一 种 极 
为 相似 的 信息 架构 。 例 如 ， 当 访问 Target.com “的 主页 时 ， 你 会 四 处 寻找 有 关 你 
想 要 的 产品 的 链接 〈 比 如 运动 装备 )， 寻 找 可 能 会 包含 该 产品 的 商品 种 类 ， 扫 
描 搜 索 结 有 果 ， 找 到 一 件 希 望 深 入 了 解 的 商品 ， 然 后 点 击 进 入 详情 页 面 仔细 查看 。 


O Target.com 隶属 美国 Target 零售 公司 ， 成 立 于 1902 年 (前 身 为 Dayton 干货 公司 )。Target 
的 市 场 定 位 是 高 级 折扣 零售 店 ， 是 美国 第 二 大 零售 商 ， 仅 次 于 沃尔玛 。2009 年 ，Target 在 
财富 500 强 中 排名 第 28。 目 前 的 Target.com 由 Target 和 Amazon 共同 管理 ， 但 双方 的 合作 
协议 将 于 2011 年 到 期 。 
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互联 网 上 的 任何 一 家 零售 网 站 都 支持 这 一 核心 的 任务 流程 。( 当 然 ， 炉 火 纯 青 的 
Google 搜索 让 我 们 几乎 能 够 完全 按 弃 在 线 购物 的 这 一 流程 ， 但 那 是 男 一 人 码 事 。) 

为 什么 会 这 样 ? 

因为 在 线 的 购物 体验 符合 我 们 购物 的 一 贯 心理 模式 一 一 实际 上 ， 它 和 我 
们 在 日 常生 活 中 的 购物 方式 完全 相同 。 这 里 面 没 有 任何 特别 之 处 。Target.com、 
Barnesandnoble.com ”、Amazon.com 和 其 他 许多 在 线 零售 商都 支持 常见 的 用 户 
行为 。 

而 这 么 做 的 理由 是 ， 一 些 人 注意 到 了 用 户 们 惯常 的 行为 ， 决 定 要 对 其 进行 
在 线 的 支持 ， 于 是 便 设 计 出 一 些 东 西 把 这 些 实际 的 行为 照搬 到 网 上 。 这 些 零售 
商 们 决定 要 全 盘 模 拟 现 实 世 界 中 的 购物 行为 ， 但 其 实 并 无 这 个 必要 。 事 实 上 ， 
只 要 他 们 真正 理解 了 现实 世界 中 的 人 类 行为 ， 就 可 以 创造 出 完全 不 同 的 解决 方 
案 ， 用 更 有 趣 的 方式 来 解决 问题 。 


而 你 的 机 会 正在 于 此 。 


正 是 心理 因素 导致 了 现 有 的 各 种 标准 化 的 解决 方案 ， 但 它 同 样 也 能 衍生 出 
其 他 更 为 引 人 注 目的 设计 。 在 决策 过 程 中 保持 以 这 种 心理 影响 为 中 心 ， 你 就 有 
能 力 构 思 出 不 可 思议 却 又 对 用 户 同 样 有 效 的 设计 。 


简 而 言 之 ， 框 架 从 不 限制 创新 ， 它 们 鼓励 创新 。 
2.3.3 ”第 一 个 框架 体系 资源 库 


在 本 书 的 创作 期 间 ， 框 架 体系 仍然 处 于 初期 发 展 阶段 。 事 实 上 ， 你 手中 的 
这 本 书 正 是 第 一 部 从 用 户 体验 而 非 代 码 的 角度 来 讨论 框架 的 作品 。 因 此 ， 我 们 
也 没有 听 说 过 任何 公开 的 框架 体系 资源 库 〈 之 前 曾 筹备 过 的 一 些 资源 库 都 属 
私有 )。 

于 是 我 们 创建 了 一 个 ， 如 图 2-9 所 示 。 地 址 是 http:/webanatomy.rhjrnet。 

“Web 解剖 学 ”框架 体系 资源 库 包含 了 本 书 中 所 有 框架 实例 的 文档 记录 。 我 
们 希望 以 你 的 反馈 、 想 法 和 贡献 为 基础 ， 让 它 持续 成 长 、 不 断 壮大 。 

正如 你 在 该 网 站 中 所 看 到 的 ， 框 架 资 源 库 基 本 上 就 是 模式 资源 库 的 一 个 外 


O Barnesandnoble.com 隶属 美国 Barnes & Noble 公司 ， 前 身 是 1873 年 Charles Barnes 创办 的 印 
刷 行 。 目 前 它 是 美国 最 大 的 图 书 零 售 商 ， 产 品 范围 包括 书 报 杂志 、DVD、 漫 画 、 礼 品 、 游 
戏 和 音乐 。 该 公司 于 20 世纪 80 年 代 末期 开始 图 书 的 在 线 销售 ， 但 直到 1997 年 才 发 布 公司 
网 站 。 如 今 在 网 上 销售 100 多 万 种 商品 。 


2.3 ”交互 设计 框架 体系 


Head back to rhjr.net! 


Web Anatomy Web Anatomy 


图 2-9 
位 于 http:/web- 
anatomy.rhjr.net 
上 的 首 个 公用 框 
架 体系 资源 库 


At the start of every web design project, 
the ongoing struggle reappears. We want 
to design highly usable and self-evident 
applications so our customers can work 
efficiently, but we also want to devise 
innovative, compelling, and exciting 
interactions to dazzle our users and 
make waves in the market. And which 
approach wins is often a circumstance of 
who's leading the design: the aesthetics- 
driven visual designer or the usability- 
minded conservative. 


search 


Resources 


About frameworks 
Subscribe to updates 
Contact 


Tweet this! 


Tweet about this site! 


Frameworks Renowned design researcher Jared Spool, founder of User Interface 
Engineering, and veteran interaction designer Robert Hoekman, Jr., 
author of Designing the Obvious and Designing the Moment, want to 
resolve this conflict once and for all. In Web Anatomy, they introduce a 
collection of interaction design frameworks ——sets of design 


Catalog 
Shopping cart 
Order management 


Search p 
: patterns and other elements that compose entire systems——and 
Sign-up . 
Reputation reveal how the psychology behind these standards leads not only to 
About Us effective designs, but can also serve as the basis for cutting-edge 
innovations and superior user experiences. 
Profile / Account management P P 
Movie sites (niche example) Web Anatomy delivers: 
Microsite 


e The world's first interaction design framework library 

e An examination of the psychology behind the standards 

e An in-depth look at what works, what doesn't, and where to go 
from here 


Citing examples from both the successful and not-so- successful, 
Hoekman and Spool break down the elements of common interactive 
web systems and subsystems, explain why they work, show when to 
use them and when to avoid them, describe implementation 
considerations, offer examples of innovations, and put a big spotlight 
on the possibilities. 


About the Authors 


Robert Hoekman, Jr., is the founder of Miskeeto, a product 
development and web design collective focused on projects that 
improve the world. The author of Designing the Obvious and 
Designing the Moment, he's a passionate and outspoken interaction 
designer, writer, and user-experience evangelist. 


Jared Spool, founder of User Interface Engineering, has more than 15 
years of experience conducting usability evaluations on a variety of 
products, and is an expert in low-fidelity prototyping techniques. As a 
recognized authority on user interface design and human factors in 
computing, Jared is on the faculty of the Tufts University Gordon 
Institute and teaches seminars on product usability. 


包装 。 如 果 你 已 经 为 自己 的 公司 (或 组 织 ) 创建 了 模式 资源 库 ， 那 么 一 切 将 非 
常 简单 。 即 使 你 还 没有 创建 ， 也 完全 可 以 让 二 者 齐头并进 : 先 利 用 wiki 或 者 其 
他 方式 来 创建 框架 文档 ， 然 后 将 文档 中 构成 元 素 项 里 列 出 的 元 素 链接 到 对 其 进 
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行 描述 的 相应 模式 文档 上 。 


在 “Web 解剖 学 ”资源 库 中 ， 尽 可 能 将 框架 所 包含 的 元 素 链接 到 各 个 公共 
模式 库 。 如 果 某 个 列 出 的 元 素 无 法 对 应 任何 公共 资源 库 ， 我 们 才 会 尝试 对 其 进 
行 描述 。 和 希望 其 他 的 模式 资源 库 在 日 后 能 够 对 这 些 元 素 进行 归档 ， 以 方便 我 们 
进行 链接 。 

作为 第 一 个 公共 框架 资源 库 ， 它 对 应 了 本 书 中 的 每 一 个 实例 。 如 果 你 把 它 
和 本 书 结合 起 来 使 用 ， 不 仅 能 了 解 如 何 为 框架 存档 ， 还 能 了 解 如 何 与 其 他 人 共 
享 框架 。 而 就 其 本 身 而 言 ， 我 们 也 相信 使 用 者 能 够 获得 在 本 章 和 前 一 童 中 所 提 
到 的 一 切 好 人 处 。 


我 们 当然 希望 它 不 会 是 最 后 一 个 公共 框架 资源 库 。 我 们 还 希望 其 他 个 人 、 
公司 或 组 织 也 能 够 开放 他 们 的 资源 库 ， 供 大 家 自由 使 用 。 


你 自己 的 资源 库 


像 你 所 看 到 的 那样 ， 我 们 的 资源 库 由 静态 的 网 页 构成 ， 而 不 是 通过 可 供 大 
家 任意 编辑 的 wiki 页 面 来 表示 。 事 实 上 ，Web 解剖 学 资源 库 构 建 在 WordPress ? 
之 上 ， 这 是 一 种 流行 的 内 容 管 理 系统 (content-management system) 和 博客 工 
具 ， 而 且 它 具有 自 定义 的 WordPress 主题 。 


你 可 以 使 用 任何 喜爱 的 工具 来 创建 自己 的 资源 库 。 不 过 重要 的 是 ， 同 公司 内 
的 所 有 人 都 应 当 有 访问 的 权限 ， 而 且 应 使 用 一 种 能 支持 快速 更 新 的 方法 来 记录 资 
源 库 〈 相 信 我 们 ， 此 举 的 理由 非常 明显 ， 你 绝 不 会 希望 用 纸 来 记录 框架 资源 库 )。 


2.4 自然 环境 下 的 框架 


Robert 曾 在 Jared 的 UIE Web App Summit2 上 举办 过 一 次 有 关 框 架 体系 的 


@ WordPress 是 一 个 使 用 PHP 语言 开发 的 免费 、 开 源 的 博客 平台 ， 于 2003 年 创立 ，2004 年 开 
始 受 到 用 户 的 普遍 欢迎 ， 现 在 已 发 展 成 为 全 球 最 知名 的 博客 服务 提供 商 之 一 。WordPress 功 
能 强大 ， 插 件 众 多 ， 可 以 说 是 目前 世界 上 最 先进 的 博客 系统 ， 目 前 开发 的 其 他 很 多 系统 都 
参考 了 它 。 除 了 提供 免费 的 博客 平台 以 便 用 户 自 由 建立 托管 博客 以 外 ，WordPress 还 免费 提 
供 了 使 用 PHP 语言 和 MySQL 数据 库 开 发 的 开源 博客 系统 引擎 以 供 下 载 ， 用 户 可 以 在 支持 
PHP 和 MySQL 的 服务 器 上 安装 该 系统 以 便 建立 自己 的 独立 博客 。 同 时 ，WordPress 提供 了 
大 量 的 主题 (theme) 插件 ， 用 户 可 以 自由 下 载 收费 或 免费 的 主题 ， 使 自己 的 博客 更 为 美观 、 

具 特 色 。WordPress 的 网 址 为 http://wordpress.org 〈 中 文 站 点 为 http://cn.wordpress.org)。 

© UIE 网 页 应 用 开发 峰会 (UIE Web App Summit) 是 UIE 公司 举办 的 年 度 成 会 ， 包 括 为 期 各 
2 天 的 密集 讲座 和 专家 演讲 ， 范 围 涵盖 Ajax、RIA、 表 单 设 计 、 草 图 设计 、 可 用 性 、 设 计 模 
式 和 Web 标准 等 。 网 站 是 http://webappsummit.com/o 


24 自然 环境 下 的 框架 


讲座 ， 有 人 提出 了 一 个 有 趣 的 问题 : 框架 体系 是 否 会 让 交互 设计 产生 同一 化 ， 
最 后 让 交互 设计 师 们 丢掉 饭碗 ? 


答案 当然 是 不 会 。 


恰恰 相反 ， 建 立 框架 体系 的 目标 之 一 就 是 为 了 让 设计 师 们 能 避免 把 时 间 都 
花 在 单调 、 重 复 的 界面 和 架构 设计 上 ， 从 而 能 有 更 充裕 的 时 间 来 做 设计 师 们 应 
该 做 的 事情 : 致力 于 为 企业 和 客户 提升 用 户 体验 。 


讲座 的 另 一 位 听众 问 到 ， 这 些 框 架 累 加 到 最 后 ， 是 否 会 出 现 整个 界面 变 成 
腔 肿 的 科学 怪人 ”那样 的 局 面 ， 并 询问 如 何 避 免 。 我 们 的 回答 是 : 


和 人 体系 统一 样 ， 框 架 体系 相互 间 的 结合 可 以 说 是 完好 无 缺 。 它 们 彼此 之 
间 有 很 多 重合 的 部 分 ， 而 且 联 系 非常 紧密 ， 因 此 相互 之 间 的 界限 几乎 根本 看 不 
到 ， 能 够 实现 完全 无 颖 的 交互 。 在 很 多 情况 下 ， 一 个 模式 很 快 就 能 变 身 为 多 个 
框架 的 构成 部 分 ， 而 且 为 用 户 扮演 多 种 角色 。 其 中 一 个 例子 就 是 名 为 Register 
Now〔 马 上 注册 〉 的 按钮 ， 它 可 以 用 于 豆 动 用 户 为 某 次 会 议 登记 ， 也 可 以 作为 
百 台 账户 管理 系统 的 人口， 方便 会 议 组 织 者 在 会 议 之 前 与 登记 者 取得 联系 。 


一 个 单独 的 框架 体系 本 身 并 没有 太 多 价值 。 即 使 是 Google 的 搜索 框架 也 不 
例外 ， 它 是 该 公司 核心 任务 流程 的 主导 框架 ， 但 仍然 需要 与 其 他 元 素 协同 合作 ， 
例如 为 访问 其 网 站 的 用 户 提供 导向 ， 鼓 励 他 们 使 用 更 多 的 Google 服务 ， 以 及 登 
录 并 获得 之 前 储存 的 信息 。 只 有 把 各 个 框架 体系 编织 在 一 起 ， 才 能 构成 一 个 完 
整 的 网 站 或 应 用 一 一 形成 一 次 完整 的 体验 。 


框架 面对面 


接 下 来 的 四 童 将 为 大 家 极为 详细 地 介绍 了 几 个 重要 的 框架 : 目录 、 搜 索 、 
注册 以 及 关于 我 们 。 在 这 几 章 中 ， 我 们 将 讨论 是 哪些 人 类 行为 导致 这 些 框架 成 
为 了 标准 ， 以 及 与 之 相关 的 调查 和 可 用 性 研究 的 结果 ， 还 有 当 你 在 自己 的 项 目 
中 使 用 它们 时 需要 考虑 的 问题 。 


在 第 7 章 ， 我 们 将 展示 的 框架 体系 面向 的 是 一 个 专门 的 市 场 一 一 电影 工业 。 
这 么 做 并 不 是 因为 我 们 相信 所 有 的 读者 都 和 电影 工业 有 关 〈 当然 或 许 你 正 是 其 
中 之 一 )， 而 是 希望 借 此 阐明 对 于 这 种 不 太 常 见 的 框架 ， 我 们 应 该 如 何 标 识 出 它 
所 包含 的 元 素 。 事 实 上 ， 几 乎 每 一 种 领域 都 有 它 自身 的 一 套 标 准 化 方案 ， 例 如 


Q@“ 科 学 怪人 ”的 典故 来 自 于 1818 年 出 版 的 哥 特 小 说 Frankenstein CJB 2 T6 IH). (又 名 The 
Modern Prometheus， 现 代 善 罗 米 修 斯 )。 故 事 中 的 疯狂 医生 从 坟 场 控 出 尸体 ， 挑 选 其 中 还 能 
PEAVEY, HELARAN EC AAA BYE (8 o 
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高 等 教育 网 站 都 会 有 申请 表 ， 摄 影 图 库 网 站 都 会 有 为 摄影 师 提 供 的 管理 工具 ， 
金融 网 站 都 会 有 投资 组 合 管理 系统 ， 等 等 。 而 我 们 将 利用 这 一 章 来 说 明 应 该 如 
何 了 解 这 些 特定 行业 的 具体 情况 ， 以 及 如 何 让 它们 与 其 他 框架 共同 构建 出 一 个 
完整 的 网 站 。 


再 次 强调 ， 当 你 完成 了 这 些 的 时 候 ， 请 访问 http://webanatomy.rhjr.net， 这 
里 有 一 个 活生生 的 框架 资源 库 ， 它 能 帮 你 记录 你 自己 的 框架 ， 并 筹备 你 自己 的 


让 我 们 去 近 距 离 地 看 看 框架 吧 ! 
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Sf 走 进 一 家 陌生 的 零售 店 时 ， 每 个 人 都 会 四 处 张望 ， 判 断 目 己 想 购 买 的 商品 
— MEER. PLN? 可 能 在 零食 区 ， 炸 苗条 的 旁边 。 牛 排 ? 应 该 在 肉 制 
品 柜台 后 面 。 芦 筹 ? 蔬菜 水 果 区 。 


那么 在 你 寻找 自己 最 喜欢 的 牌子 的 乳酪 桨 时 ， 治 途 是 否 有 其 他 商品 吸引 了 
你 的 注意 ?当然 了 ， 很 多 东西 都 会 在 你 预料 之 中 ， 例 如 草 条 、 曲 奇 、 梳 打 人 饼干 ， 
但 是 货架 最 远 处 那些 花花 绿绿 的 零食 ， 你 是 否 也 能 够 发 现 呢 ?” 比 如， 你 的 小 孩 
ERR LAG TH a IS ENERET 


如 果 你 没有 亲自 走 过 去 ， 可 能 根本 就 不 会 发 现 它们 。 如 果 你 不 去 判断 乳 栈 
桨 的 货架 位 置 ， 可 能 就 会 两 手 空空 地 离开 。 如 果 你 不 在 所 有 的 乳酪 桨 中 寻找 自 
己 喜 欢 的 那个 牌子 ， 可 能 就 不 会 发 现 另 一 个 也 很 不 错 的 牌子 正在 打折 促销 。 


在 零售 店 购物 是 一 种 极其 日 常 的 行为 ， 大 多 数 成 年 人 都 不 会 以 批判 的 态度 
来 审视 它 。 但 如 果 你 是 一 个 商务 网 站 的 Web 设计 师 ， 或 者 一 个 有 自己 网 上 作品 
集 的 摄影 师 ， 或 者 某 个 新 闻 机 构 的 Web 团队 的 设计 主管 ， 事 情 又 会 怎样 呢 ? 其 
实 我 们 完全 可 以 从 零售 店 购物 当中 学 到 一 些 知识 。 


也 就 是 说 ， 在 一 个 陌生 的 环境 里 ， 通 过 四 处 巡视 而 缩小 选择 面 ， 从 而 获得 
导向 ， 找 出 物品 位 置 的 这 种 举动 ， 在 我 们 的 生活 中 是 根深 带 固 的 。 因 此 ， 不 管 
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是 在 某 个 商务 网 站 还 是 身 处 零售 店 ， 用 户 的 寻找 行为 在 根本 上 也 将 完全 一 致 。 
其 实 这 种 相似 性 并 不 仅 限 于 此 。 在 商务 网 站 中 使 用 的 目录 模式 也 会 被 运用 到 许 
多 其 他 的 上 下 文 情境 中 去 一 一 实际 上 ， 它 正 是 无 数 大 小 网 站 的 基础 。 


目录 的 设计 ， 正 是 用 户 体验 的 成 败 关 键 。 


3.1 描述 


当 我 们 在 目录 中 进行 挑选 的 时 候 ， 通 常 都 会 遵循 同样 的 3 个 步骤 。 首 先 ， 
筛选 出 所 有 的 顶级 选择 ， 然 后 ， 挑 选 出 其 中 之 一 : 最后， 查看 该 目标 以 验证 它 
就 是 我 们 想 要 的 那 一 个 。 

这 个 过 程 看 上 去 非常 简单 ， 但 在 网 上 实现 却 常常 优 劣 参半 。 不 过 你 可 能 并 
不 熟悉 这 些 使 用 整 脚 的 解决 方案 的 网 站 ， 因 为 大 部 分 该 类 网 站 都 只 在 互联 网 中 
稍 纵 即 逝 。 

希望 你 能 理解 我 们 的 意思 。 

要 想 较 好 地 支持 这 个 选择 过 程 ， 你 所 要 做 的 绝 不 只 是 列 出 商品 然后 添加 价 
格 标签 那么 简单 ， 但 也 没有 你 想 得 那 么 复杂 。 

既然 在 选择 目标 的 过 程 中 ， 最 自然 的 人 类 行为 就 是 遵循 上 述 3 个 步 又 ， 那 
么 最 符合 逻辑 的 方式 就 是 运用 一 种 “支撑 式 ” 的 设计 ， 来 满足 每 一 步 的 需求 。 

大 家 普遍 认同 “用 户 痛恨 点 击 ”， 可 是 与 此 背道而驰 的 是 ， 目 录 框 架 采 用 的 
步骤 实际 上 多 于 理论 的 需要 ， 只 因为 这 是 人 类 行为 要 求 的 结果 。 (顺带 一 提 ， 用 
户 痛 恨 点 击 的 说 法 不 属实 。 只 要 用 户 感 觉 点 击 正在 带领 自己 向 目标 内 容 靠拢 ， 
他 们 就 根本 不 会 介意 点 击 。) 


目录 框架 中 的 所 有 元 素 的 作用 都 是 支持 这 个 选择 的 过 程 。 


3.2 ”上下文 情境 

有 很 多 行为 都 涉及 目标 选择 ， 因 此 有 无 数 类 型 的 网 站 都 使 用 了 同一 种 基础 
信息 架构 ， 也 就 是 我 们 在 这 里 所 讨论 的 目录 框架 。 

电子 商务 网 站 应 支持 寻找 和 购买 商品 的 行为 。 资 源 库 网 站 要 支持 定位 和 察 
看 资料 ， 例 如 书籍 、DVD 和 电脑 游戏 。 作 品 集 网 站 〈 不 论 个 人 或 公司 ) 要 支持 
人 们 了 解 和 察看 以 前 的 作品 。 新 闻 网 站 要 支持 辨别 、 阅 读 新 闻 故 事 和 专栏 文章 。 
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各 种 类 型 网 站 的 例子 不 胜 枚 举 。 而 绝 大 部 分 网 站 都 以 一 种 几乎 完全 一 致 的 方式 
来 支持 这 些 行为 。 事 实 上 ， 今 日 的 互联 网 上 还 有 不 少 网 站 尚未 模仿 这 种 基本 的 
组 织 架 构 ， 这 已 太 常 见 了 ， 听 起 来 简直 符 人 听闻 。 


当然 ， 每 一 种 网 站 看 上 去 都 有 一 套 适 合 自己 领域 的 解决 方案 ， 但 这 些 类 型 
网 站 《以 及 其 他 许多 类 型 ) 的 核心 架构 都 非常 单纯 ， 那 就 是 把 用 户 从 初级 的 划 
分 带领 到 末 级 的 详细 内 容 中 去 。 


与 多 数 其 他 框架 不 同 ， 目 录 框 架 通 常 不 会 被 符 套 进 更 大 的 上 下 文 情境 中 
去 一 一 目录 本 身 通常 就 是 一 个 完整 的 情境 。 换 句 话 说， 目录 在 大 多 数 情 况 下 都 
体现 了 网 站 的 核心 。 也 许 在 信息 架构 中 还 会 有 许多 附加 的 分 支 ， 例 如 专门 提供 
公司 信息 的 页 面 集合 ， 或 者 带 经 验 性 质 的 微型 子 站 点 ， 但 由 于 目录 文 持 的 是 这 
些 网 站 的 核心 行为 一 一 也 就 是 定位 和 选择 目标 的 行为 ， 不 管 出 于 什么 原因 ， 它 
通常 是 这 类 网 站 中 最 为 突出 且 最 为 普遍 的 任务 流程 。 

即便 如 此 ， 我 们 也 完全 可 以 把 目录 当做 是 某 个 大 网 站 中 的 一 小 块 ， 甚 至 


把 它 放 在 一 个 附属 的 位 置 上 。Discovery 频道 的 网 站 就 是 一 个 例子 : Shopping. 
discovery.com 《如 图 3-1 所 示 )。 


图 3-1 
DiscoveryStore 
KE Discovery W 
站 中 的 一 个 子 

区 


分 


Top Video 
an vs. Wild: Scorpion Lunch 


Shop Discovery 
| Browse Best Selling 
Discovery Channel 


There is a downside to being a human catapult. Get Jonathan | s. 
Goodwin's take in a behind-the-scenes video. | SHOP NOW Q 


从 名 字 就 可 以 看 出 ，DiscoveryStore 绝 不 是 最 主要 的 项 目 。 用 户 点 击 
Discovery.com 主 站 右上 角 的 一 个 小 图 标 就 可 以 进入 这 里 ， 它 主要 提供 了 该 频道 
一 些 节 目的 描述 和 播放 时 间 ， 再 加 上 一 些 新 闻 、 小 游戏 和 视频 片段 。 用 户 访问 
这 个 站 点 更 多 是 为 了 寻找 信息 ， 而 不 是 真正 购买 什么 ， 因 此 商店 显得 非常 孤立 ， 
好 像 是 后 加 上 去 的 内 容 。 
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3.8 ”任务 流程 


目录 框架 体现 了 一 个 基本 的 任务 流程 : 用 户 从 高 级 的 分 类 页 面 移动 到 某 个 
分 类 下 的 内 容 陈 列 区 ， 然 后 直接 选择 某 个 希望 查看 的 目标 ， 从 而 抵达 内 容 页 面 。 


你 可 能 也 曾 执行 过 这 一 流程 ， 可 能 已 经 成 百 上 千 次 了 ， 但 可 能 从 未 意识 到 它 。 
3.4 其 他 必 备 框架 


很 多 Web 用 户 极度 依赖 于 搜索 功能 ， 因 为 可 以 快速 在 目录 中 定位 目标 。 
此 搜索 框架 (参见 第 4 章 ) 也 是 所 有 目录 网 站 中 的 一 个 必 备 部 分 。 然 而 本 章 后 
面 将 讨论 ， 这 两 种 框架 所 扮演 的 角色 绝 不 能 混淆 ， 它 们 各 自 所 实现 的 目标 不 同 ， 
应 作为 两 个 独立 的 任务 流程 来 对 待 。 


3.5 ”相关 框架 


许多 电子 商务 网 站 的 目录 都 允许 并 鼓励 用 户 创建 个 人 账户 ， 以 便 他 们 能 
更 好 地 管理 自己 选择 的 商品 和 订单 等 ， 同 时 还 鼓励 用 户 对 网 站 做 出 更 多 承诺 ， 
投入 更 多 精力 。 要 想 继续 了 解 这 方面 的 内 容 ， 请 访问 webanatomy.rhjr.net， 参 阅 
账户 管理 框架 。 


3.6 ”构成 元 素 


目录 框架 仅 由 4 个 元 素 构成 ， 但 每 一 个 元 素 都 不 可 或 缺 。 它 们 分 别 是 分 类 
页 、 陈 列 页 、 内 容 页 和 引导 链接 。 


这 几 个 毫 不 张扬 的 元 素 连接 在 一 起 ， 形 成 了 互联 网 这 个 庞然大物 的 骨干 。 
3.6.1 分 类 页 


在 构成 目录 框架 的 一 系列 界面 中 ， 首 先是 分 类 页 。Jared 在 UIE 的 研究 团 
队 也 把 它 称 为 “部 门 页 ”(department page)， 因 为 它 能 表现 出 商店 的 各 个 部 门 
(department) 分 别 卖 什么 东西 "。 但 这 个 术语 也 应 该 能 轻松 地 应 用 在 新 闻 网 站 的 
分 类 中 《例如 世界 新 闻 和 政治 新 闻 )， 音 乐 网 站 也 同样 如 此 《例如 摇滚 乐 和 流行 
乐 )。 实 际 上 ， 网 站 的 首页 通常 也 能 划 入 分 类 页 ， 因 为 我 们 能 通过 它 概览 网 站 里 
的 所 有 内 容 。 


O 例如 ， 服 装 部 。 


Bes 


tet 
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Buy.com® 
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为 了 揭示 这 种 页 面 的 威力 ，UIE 曾 仔 细 研 究 过 组 织 网 站 内 容 的 不 同 策略 。 


2002 年 ，UIE 团队 调查 了 许多 广 受 欢迎 的 零售 业 电 子 商 务 网 站 ， 了 解 它们 
是 如 何 处 理 大 量 商品 的 分 类 问题 的 。 同 时 他 们 也 希望 了 解 这 些 网 站 的 设计 团队 
是 否 提出 了 不 同 的 分 类 方法 ， 以 及 哪些 方法 最 为 有 效 〈 分 析 结 果 将 在 本 章 后 面 
讨论 )。 从 研究 服装 和 家 居 用 品 开 始 ，UIE 调查 了 13 个 不 同 的 网 站 ， 它 们 销售 
的 产品 都 颇 为 相似 。 


每 个 网 站 都 表现 出 了 类 似 的 特点 。 首 先 ， 它 们 把 内 容 划分 为 几 个 顶级 类 别 ， 
例如 女装 、 男 装 以 及 家 居 用 品 。 然 后 ， 它 们 为 每 个 大 类 分 别提 供 了 陈列 页 〈 参 
见 下 节 )。 最 后 ， 把 各 个 陈列 条 目 通过 链接 指向 到 具体 的 内 容 页 面 〈 参 见 3.6.3 
TO. KI 3-2 和 图 3-3 显示 了 分 类 列表 和 陈列 页 的 一 个 实例 。 


与 UIE 于 2002 年 的 研究 相 比 ， 事 情 并 没有 发 生 太 多 变化 。 主 流 电子 商务 
网 站 仍然 有 各 自 的 分 类 页 、 陈 列 页 和 内 容 页 ， 而 分 类 页 为 目标 选择 过 程 的 第 一 
Ate A: SER. 


页 面 按照 用 户 的 理解 ， 把 网 站 内 极为 丰富 的 内 容 分 割 为 粗略 的 组 ， 将 相互 
关联 的 内 容 划 分 到 一 起 。 在 音乐 网 站 中 的 “ 摇 深 乐 ”一 词 应 当 包 含 用 户 认为 属 
于 摇滚 乐 范 畴 内 的 所 有 音乐 ， 在 新 闻 网 站 中 的 “科技 新 闻 ” 一 词 应 当 只 链接 到 
与 科技 有 关 的 新 闻 故 事 上 ， 如 图 3-4 所 示 。 
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O BestBuy.com (Best Buy, HEK) 是 北美 地 区 最 大 的 全 球 性 消费 电子 零售 商 ， 财 富 100 强 
公司 之 一 ， 在 中 国 的 上 海 亦 设 有 分 店 。 中 文 网 站 是 http:/www.bestbuy.com.cn。 
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Buy 使 用 了 陈列 页 


图 3-4 
YTimes.com 提 
供 了 许多 分 类 页 


图 3-5 
BestBuy.com 为 部 
分 产品 提供 了 搜 

RETA 
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NYTimes.com 提供 了 一 系列 主要 的 分 类 ， 包 括 国际 新 闻 、 国 内 新 闻 、 财 经 
新 闻 、 科 技 新 闻 ， 等 等 。 每 一 个 分 类 页 在 本 质 上 都 和 电子 商务 网 站 的 部 门 页 完 
全 相同 : 它们 提供 了 一 种 筛 除 选项 然后 选择 某 个 具体 条 目的 方法 。 不 过 ， 新 闻 
网 站 通常 也 会 使 用 分 类 页 和 陈列 页 的 混合 体 〈 在 下 一 节 将 会 讨论 )， 其 中 的 分 类 
页 中 除了 指向 陈列 页 外 ， 也 提供 直接 指向 文章 本 身 的 链接 。 


分 类 页 还 有 一 个 子 类 型 ， 也 就 是 UIE 所 谓 的 “搜索 部 门 ”(search depart- 
ment) W, WRI 3-5 所 示 。 这 是 一 个 为 某 个 搜索 词 而 专门 制作 的 搜索 结果 页 面 ， 
风格 与 其 他 的 部 门 页 颇 为 类 似 。 比 如 ， 在 BestBuy.com 上 搜索 iPod 后 得 到 的 结 
果 页 ， 看 上 去 更 像 苹果 公司 的 主页 ， 而 不 是 Best Buy 通常 的 那 种 搜索 结果 。 


| Store Locator Outlet Center Gift Cente mall Business Center Cart 
Gift Cards Credit Cards Reward Zone® Customer Service WishList Order Status My Account 0 Items 
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SEARCH FOR Keyword or Item # IN [All Categories Y (Go) Welcome. Please create an account or Sign in. 


Best Buy > Name Brands > Apple > iPod & iTunes 


Introducing the new iPod touch 


这 种 方法 适用 于 某 些 风靡 一 时 的 搜索 关键 词 ， 以 及 横 跨 多 个 领域 或 者 包括 
数 个 子 分 类 的 产品 。 或 者 也 可 能 是 因为 网 站 和 产品 公司 之 间 签 订 了 推广 协议 。 

不 过 ， 搜 索 部 门 页 通常 都 不 会 一 直 存在 。 它 们 一 般 只 存在 很 短 的 时 间 。 一 
且 搜 索 关 键 词 不 再 需要 特殊 的 注意 ， 最 终 会 被 标准 的 搜索 结果 所 代 蔡 。( 更 多 有 
关 搜 索 部 门 页 的 内 容 请 参见 第 4 章 。) 


如 你 所 见 ， 把 相关 内 容 按 照 大 的 分 类 进行 分 组 ， 就 能 帮助 用 户 排除 与 目标 
内 容 无 关 的 部 分 ， 从 而 只 关注 那些 更 可 能 满足 他 此 刻 需 求 的 内 容 。 


3.6 ”构成 元 素 


到 这 里 ， 他 就 可 以 继续 前 进 ， 选 择 一 个 目标 了 。 
3.6.2 ”陈列 页 
目标 选择 过 程 中 的 第 二 步 ， 也 就 是 选择 ， 就 发 生 在 陈列 页 中 。 


陈列 页 是 在 目录 网 站 中 最 为 辛劳 的 页 面 。 它 们 能 够 帮助 用 户 找到 所 需 内 容 。 
一 个 设计 良好 的 陈列 页 每 次 都 能 带领 用 户 走向 成 功 ， 而 一 个 设计 差强人意 的 网 
站 则 只 会 赶 走 用 户 。 

在 UIE 的 研究 中 ， 各 个 陈列 页 上 的 条 目 数 量 和 具体 信息 虽然 彼此 不 同 ， 但 
每 个 网 站 基本 上 都 会 显示 同样 类 型 的 信息 ， 例 如 电子 商务 网 站 总 会 显示 商品 的 
名 称 以 及 价格 ， 如 图 3-6 所 示 。 


图 3-6 

Gap.com? 4E f 
列 页 中 AT; 
品 的 名 称 和 价格 


AV 
AY 


Perfect wash Beauclalre Perfect wash Beauclaire Perfect wash Beauclaire 


striped shirt striped shirt striped shirt striped shirt 
$44.50 $44.50 $44.50 $44.50 


M» y 
ALA 


ay a IN 


I} 

全 a dla i 

Perfect wash Henry Perfect wash Henry Perfect wash Henry Perfect wash Odem 

checked shirt checked shirt checked shirt multi-striped shirt 
$44.50 


陈列 页 要 想 行 之 有 效 ， 就 必须 能 回答 用 户 脑海 中 与 选择 有 关 的 任何 问题 。 
比如 ， 假 设 索 尼 爱 立信 希望 你 购买 他 们 的 一 款 手 机 ， 而 它 有 17 种 型 号 可 


O Gap 是 一 个 美国 服装 饰品 的 零售 商 ， 创 立 于 1969 年 ， 总 部 位 于 加 州 的 旧金山 。Gap 旗下 目 
前 已 有 超过 15 万 名 员工 ，3500 多 间 店 铺 遍 布 美 国 、 加 拿 大 、 墨 西 哥 、 法 国 、 爱 尔 兰 、 日 
本 、 印 尼 、 韩 国 、 马 来 西亚 、 新 加 坡 和 英国 。 


ZA 
W508a 六 C905a 六 C702a 六 C510a & W760a 


TM506 W350a Z555i 
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选 。 公 司 在 网 站 上 列 出 了 所 有 可 购买 的 型 号 ， 认 为 这 将 能 帮助 你 进行 取舍 。 


W502a, C905a, C702a, C510a, W760a, X1, W595a, C902, TMS506, 
W350a, Z555i. W380a. Z750a. K850i. W580i, Pli. S5001. 


你 喜欢 C702a 还 是 X1 ? TM506 怎么 样 ? 


这 几 款 有 什么 区 别 ? 索尼 爱立信 只 会 在 你 点 击 想 要 的 那 款 手机 之 后 才 告 诉 
你 答案 。 只 有 在 那 时 ， 网 站 才 会 向 你 提供 该 型 号 的 具体 功能 。 

什么 叫 你 无 法 决定 ?我 们 已 经 把 SonyEricsson.com 的 设计 师 向 每 一 位 来 它 
的 网 站 上 看 手机 的 用 户 提 供 的 信息 都 告诉 你 了 。 想 知道 其 他 人 要 买 哪 一 款 手 机 ， 
你 就 到 前 面 那 个 列表 里 选择 。 


公平 地 说 ， 如 今 该 网 站 已 经 为 手机 提供 了 附带 的 图 片 ， 如 图 3-7 所 示 。 


W595a C902 


一 
P1i 


S500i 


x1 
M. 
(o) 
Z750a K850i W580i 


W380a 


图 3-7 


SonyEricsson .comyyH 


售 的 手机 提供 了 图 片 , 但 没有 描述 


现在 你 该 知道 选 哪 一 款 了 ， 对 吗 ? RK XI 看 上 去 相当 漂亮 。 它 应 该 具备 
你 想 要 的 所 有 功能 ， 对 吗 ? 


索尼 爱立信 的 设计 师 非常 辛苦 地 为 面市 的 所 有 手机 创建 出 一 个 陈列 区 域 ， 
以 便 用 户 能 够 从 中 进行 选择 。 但 是 他 们 遗漏 了 一 个 非常 关键 的 元 素 : 用 户 在 选 
择 时 可 能 需要 更 多 信息 。 如 果 只 提供 型 号 和 图 片 ， 除 非 你 本 来 就 非常 了 解 自己 
想 要 的 那 款 手机 ， 否 则 一 点 用 也 没有 。 


而 且 在 这 里 挣扎 的 并 不 只 有 索尼 爱立信 的 设计 师 。 摩 托 罗 拉 的 设计 师 们 在 
这 方面 干 了 完全 相同 的 事情 ， 如 图 3-8 所 示 。 
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View: Latest Phones y View All 73 
123452» 
B 9 
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E 
Motorola Krave™ ZN4 MOTOZINE™ ZN5 AURA "a MOTO™ W233 renew 
Clearly You Shoot. Share. Show Off. The return of artistry Eco.Logical. 


g d Fe E 
= 

Motorola Tundra™ VA76r MOTOROKR™ E8 MOTORAZR2™ V9x MOTORAZR2™ Vgm 

Abuse it. Track it. Hear it. From talk to music in one touch Your touch makes all the difference Sleek and smart 


除了 极为 简单 的 一 点 描述 之 外 ， 摩 托 罗 拉 的 列表 中 并 没有 比索 尼 爱 立信 提 
供 更 多 的 信息 。 用 户 要 想 从 这 样 的 列表 中 选 到 自己 梦 寨 以 求 的 手机 ， 几 乎 是 不 
aT Ae 


要 想 协 助 用 户 选 择 目标 ， 陈 列 页 所 使 用 的 设计 模式 可 以 五 花 八 门 、 千 差 万 
别 ， 而 具体 使 用 哪 一 种 则 完全 取决 于 网 站 的 用 途 ， 以 及 用 户 在 该 时 刻 的 目标 和 
上 下 文 情境 。 以 下 是 目录 框架 中 为 协助 用 户 进 行 选 择 而 可 能 用 到 的 一 些 模式 。 

1. 快速 查看 

在 电子 商务 网 站 里 ， 人 快速 查看 模式 能 让 用 户 直 接 查 看 产品 的 大 尺寸 图 片 ， 
而 无 需 进 入 该 目标 的 内 容 页 (在 下 一 节 将 会 讨论 )。 快 速 查看 通常 还 能 让 用 户 直 
接 把 目标 添加 到 购物 车 ， 选 择 基 本 外 观 〔( 例 如 服装 网 站 里 的 颜色 和 大 小 )， 同 时 
还 能 获得 购买 信息 ， 例 如 商品 的 价格 和 大 概 的 发 货 时 间 。 

2. 条 目标 识 符 

几乎 所 有 的 陈列 页 都 会 为 显示 的 条 目 提 供 某 种 标识 符 。Amazon.com 里 的 
书籍 依据 书 名 来 标识 。NYTimes.com 里 的 文章 依据 其 标题 来 标识 。 汽 车 依据 其 
厂商 和 型 号 来 标识 。 

3. 条 目 图 片 

条 目 图 片 提供 了 某 个 产品 的 预览 ， 有 利于 用 户 通过 外 观 在 陈列 页 的 众多 条 
目 中 选择 所 需 商 品 。 电 子 商 务 网 站 通常 都 会 使 用 图 片 来 展示 产品 ， 而 且 是 以 缩 
略图 的 形式 ， 其 大 小 只 需 能 吸引 用 户 访问 该 条 目的 内 容 页 即 可 。 


图 3-8 
摩托 罗拉 选择 了 
与 索尼 爱立信 一 
样 的 方法 
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4. 简短 的 条 目 描 述 


在 图 片 无 法 胜任 时 ， 简 短 的 描述 可 以 为 该 条 目 提 供 概 括 性 的 文字 信息 。 比 
如 ， 在 电子 商务 网 站 中 ， 如 果 某 个 产品 的 图 片 不 能 帮助 用 户 判 断 商 品 之 间 的 差 
异 时 ， 就 会 加 上 一 段 简短 的 条 目 描述 。 如 果 你 要 买 帽 子 ， 不 同 帽子 的 图 片 会 很 
有 帮助 ;但 如 果 是 买 数码 相机 ， 看 上 去 都 差不多 ， 图 片 就 没什么 帮助 了 ， 因 此 
需要 一 段 简短 的 条 目 描 述 来 帮助 用 户 进行 区 分 。 


如 果 陈 列 页 中 缺少 用 户 需要 的 信息 ， 他 们 将 不 得 不 像 踩 着 弹簧 高 跷 那样 。 
“弹簧 高 跷 ”是 一 种 小 孩 们 玩 的 弹力 玩具 ， 这 个 词 形容 的 是 用 户 在 网 站 各 层级 之 
间 跳 来 跳 去 ， 希望 自己 最 终 能 遇见 想 要 的 内 容 。 


比如 ， 某 位 用 户 正在 为 自己 的 手机 挑选 配件 。 他 知道 手机 的 型 号 ， 想 看 一 
下 有 什么 相应 的 配件 。 如 果 是 这 种 情况 ， 摩 托 罗拉 的 陈列 页 应 该 会 很 有 效 。 但 
如 果 这 位 用 户 是 在 挑选 新 手机 (他 要 更 新 换代 了 )， 也 许 不 太 了 解 手机 的 型 号 ， 
而 且 陈 列 页 对 他 要 找 的 也 没有 提供 多 少 信息 “例如 大 小 ， 按 键 是 否 灵敏 ， 是 否 
能 收发 邮件 )， 那 么 他 将 不 得 不 借助 “弹簧 高 跷 ”来 完成 这 个 任务 ， 在 各 个 产品 
页 面 之 间 跳 来 跳 去 。 


UIE 的 可 用 性 测试 分 析 指 出 ， 弹 簧 高 跷 很 少 能 帮助 用 户 找到 目标 内 容 。 在 
对 电子 商务 网 站 的 研究 中 ， 有 66% 的 购买 行为 都 发 生 在 完全 没有 弹簧 高 跷 的 情 
况 下 ， 也 就 是 说 2/3 的 用 户 会 购买 他 们 在 陈列 页 中 的 第 一 选择 。 而 一 旦 用 户 踏 
上 了 弹簧 高 跷 ， 跳 的 次 数 越 多 ， 购 买 的 几率 就 越 小 。 


这 也 适用 于 其 他 目录 网 站 : 研究 显示 那些 不 踩 弹 簧 高 跷 的 用 户 中 有 55% 都 
能 找到 自己 的 目标 内 容 ， 而 踩 上 弹簧 高 跷 的 用 户 成 功 的 几率 只 有 11%。 


要 想 进 一 步 说 明 这 个 道理 ， 我 们 来 看 看 买房 置业 中 最 为 复杂 的 一 个 过 程 : 
申请 贷款 。 你 可 能 会 被 其 中 的 行 话 弄 得 晤 头 转向 ， 尤 其 是 当 你 完全 是 个 新 手 的 
时 候 。 

许多 银行 网 站 都 以 和 Citibank.com“ 相 类 似 的 方法 来 处 理 贷款 申请 。 它 们 


的 陈列 页 上 都 包含 一 个 称 为 “What You Get”( 你 将 获得 ) 的 区 域 ， 如 图 3-9 所 
示 。 它 很 低调 地 声明 : 你 可 以 申请 固定 利率 (fixed rate) “贷款 、 可 调整 利率 


O Citibank.com 是 美国 花旗 银行 的 网 站 。 花 旗 银 行 的 前 身 是 1812 年 成 立 的 纽约 城市 银行 ， 现 
已 成 为 美国 最 大 的 银行 ， 在 全 球 近 五 十 个 国家 及 地 区 设 有 分 支 机 构 。 它 也 是 第 一 家 在 中 国 
开办 业务 的 美国 银行 。 

固定 利率 是 指 在 借贷 期 内 不 作 调整 的 利率 。 实 行 固定 利率 ， 对 于 借贷 双方 准确 计算 成 本 与 

收益 十 分 方便 ， 是 传统 采用 的 方式 。 


© 
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(adjustable rate) “贷款 和 FHA/VA 抵押 ”贷款 ， 而 且 都 提供 了 链接 。 


What you get 如 果 你 已 经 知道 
Competitive rates 己 要 什么 ， oe 
See examples of current rates 银 行 的 陈列 页 将 

and explore the loans available 很 有 效 


where you live. 


Wide range of mortgages 


* Fixed Rate and Adjustable 
Rate Mortgages. 


* Conventional, Jumbo and 
Super Jumbo Loans 


* FHA/VA Mortgages 


SureStart® pre-approvals* 

* Get a pre-approved loan 
commitment so you can shop 
with confidence. 


Rewards 


month if you have a home 
equity line linked to a 
qualifying Citibank checking 
account and at least one other 
qualifying Citibank product or 
service. 


如 果 你 已 经 知道 自己 需要 什么 贷款 ， 那 么 以 上 的 方法 也 许 会 颇 为 见效 。 但 
如 果 买 主 们 是 第 一 次 看 到 这 些 术 语 呢 ? 他 们 应 该 怎样 做 决定 ? 似乎 花旗 银行 的 
设计 师 认 为 用 户 们 愿意 踩 上 弹簧 高 跷 来 找 答案 。 


很 明显 ， 在 陈列 页 中 包含 有 利于 用 户 做 决定 的 尽 可 能 多 的 信息 是 相当 重要 
的 。 对 于 索尼 爱立信 和 摩托 罗拉 来 说 ， 就 是 在 每 款 手机 的 图 片 旁 加 上 简短 的 功 
能 列表 。 对 于 花旗 银行 来 说 ， 就 是 对 每 类 贷款 进行 简要 地 撒 述 ， 或 者 把 页 面 分 
成 几 个 部 分 ， 例 如 第 一 次 买房 者 (直接 贷款 ) 和 已 有 房 者 《抵押 贷 款 )， 有 助 于 
用 户 更 快 确定 自己 适合 申请 哪 一 种 贷款 。 对 于 新 闻 网 站 来 说 ， 可 以 让 标题 包含 
更 多 信息 ， 以 便 读 者 了 解 故事 内 容 ， 或 者 是 直接 给 出 故事 的 节选 摘要 。 


C 浮动 利率 是 一 种 在 借贷 期 内 可 定期 调整 的 利率 。 根 据 借贷 双方 的 协定 ， 由 一 方 在 规定 的 时 
间 依 据 某 种 市 场 利 率 进行 调整 ， 一 般 调 整 期 为 半年 。 浮 动 利率 因 手 续 繁杂 、 计 算 依据 多 样 
而 增加 费用 开支 ， 但 是 借贷 双方 承担 的 利率 变动 的 风险 较 小 。 

O FHA/VA 抵押 贷款 是 指 在 美国 联邦 住房 局 (FHA, Federal Housing Administration) 或 退伍 军 
人 局 (VA, United States Department of Veterans Affairs) 向 银行 提供 抵押 保险 担保 的 抵押 
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而 另 一 家 银行 ， 富 国 银行 "在 自己 的 贷款 选项 中 所 使 用 的 方法 则 稍稍 不 同 。 
虽说 该 网 站 提供 的 内 容 是 一 样 的 ， 但 其 陈列 页 〈 有 多 个 版 本 ， 取 决 于 你 在 网 站 
中 访问 的 路 径 ) 上 提供 了 一 定 的 信息 来 帮助 用 户 决定 该 点 击 哪个 链接 。 (例如 所 
有 符合 条 件 的 买主 都 有 机 会 采取 灵活 的 资质 审核 方式 ， 并 享受 只 需 3% 利息 的 
第 一 套 住房 贷款 。) 

还 不 止 这 些 ， 陈 列 页 中 条 目的 排列 顺序 也 与 此 相关 。 根 据 UIE 的 研究 ， 用 
户 通常 都 认为 最 重要 的 条 目 应 该 最 先 列 出 来 。 实 际 上 ， 他 们 通常 都 不 会 意识 到 
有 的 列表 是 按照 字母 顺序 来 排列 的 ， 如 果 开 头 的 几 条 不 能 激 起 他 们 的 兴趣 ， 通 
常 都 会 推断 其 余 的 一 定 更 没意思 。 


不 管 效 率 如 何 ， 用 户 们 都 将 在 陈列 页 上 做 出 选择 ， 然 后 移动 到 选中 的 内 


内 容 页 也 称 为 是 详细 资料 页 (例如 产品 的 详细 资料 )， 用 户 最 终 可 以 在 这 里 
验证 自己 的 选择 ， 浏 览 自己 找到 的 内 容 。 他 们 可 以 在 这 里 把 书 放 进 购物 车 ， 阅 
读 想 看 的 文章 ， 也 可 以 在 这 里 查阅 评论 ， 并 决定 自己 是 否 应 该 买 下 这 部 数码 
相机 。 


换 名 话说， 内 容 页 在 整个 搜寻 行动 的 尾声 为 我 们 提供 了 奖励 。 在 电子 商务 
网 站 里 ， 它 可 能 会 提供 用 户 评论 、 相 关 的 促销 信息 、 惯 用 数据 和 维护 数据 、 可 
选 外 观 ， 等 等 。 在 新 闻 网 站 里 ， 除 了 我 们 想 读 的 文章 之 外 ， 它 还 可 能 会 提供 分 
享 功能 以 及 该 类 新 闻 的 RSS 订阅， 或 者 是 读者 的 评论 。 


如 图 3-10 所 示 ，Gap.com 的 内 容 页 提供 了 简短 的 产品 描述 以 及 日 常 护 理 信 
息 ， 同 时 让 用 户 能 自由 选择 尺码 和 颜色 ， 还 能 查看 该 产品 的 大 幅 图 片 。 

而 在 NYTimes.com 上 ， 如 图 3-11 所 示 ， 内 容 页 让 用 户 可 以 点 击 阅读 下 一 
篇 该 类 文章 ， 另 外 也 给 出 了 该 类 最 受 欢 迎 文章 的 链接 。 此 外 还 有 一 个 评论 系统 ， 
以 便 读 者 进行 讨论 。 


但 并 不 是 所 有 的 内 容 页 都 能 帮助 用 户 验证 自己 的 选择 。 


O 富国 银行 (Wells Fargo) 是 美国 的 一 家 金融 集团 ， 由 成 立 于 1852 年 的 加 州 旧 富国 银行 及 中 
西部 的 西北 银行 (Norwest) 合并 而 成 。 富 国 银行 以 零售 银行 业务 为 主 ， 批 发 银行 及 消费 者 
金融 为 辅 ，2009 FER, HA 6 650 间 零 售 分 行 、4 800 万 名 客户 。 
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ha on Monday Hat the users, not the Web site, *own and control (gj REPRINTS - Hotel Designs With Cinematic Flavor 
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比如 ， 在 线 消费 电子 行业 中 有 一 个 惯例 ， 它 要 求 零售 商 对 购物 者 隐藏 产品 
价格 ， 而 只 有 当 购 物 者 把 它 放 到 购物 车 中 去 之 后 ， 该 产品 的 实际 价格 才 会 显示 
出 来 。 如 果 购 物 者 在 此 之 后 决定 不 买 这 个 产品 ， 那 么 他 就 必须 把 它 移出 购物 车 。 
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当 观 察 到 人 们 在 采取 了 这 种 手段 的 网 站 上 购物 时 ，UIE 的 研究 员 们 注意 到 
许多 购物 者 对 此 表现 出 极度 的 愧 恼 。 研 究 员 询问 他 们 认为 商家 这 么 做 的 理由 时 ， 
大 多 数 人 都 感觉 这 是 页 花 招 ， 零 售 商 寄 望 于 他 们 犯 下 错误 ， 从 而 碰巧 买 到 原本 
并 不 想 买 的 东西 。 


这 其 实 并 不 是 花招 ， 而 是 零售 商 与 生产 商 之 间 的 合约 要 求 ， 称 为 MAP 
(Minimum Available Pricing， 最 低 可 用 价格 ) 策略 ， 从 而 允许 大 型 零售 商 能 
打折 销售 商品 。 

这 项 协议 诞生 自 数 十 年 前 ， 其 本 意 是 为 了 提高 小 型 的 零售 店 的 竞争 优势 ， 
帮助 它们 在 与 大 型 零售 商 的 竞争 中 生存 下 来 。 大 型 零售 商 的 订单 量 很 大 、 进 价 
很 低 ， 导 致 其 商品 售 价 也 更 便宜 。 因 此 协议 规定 ， 所 有 的 大 型 零售 商都 不 能 对 
外 宣传 自己 的 低 价 ， 只 能 在 顾客 进入 商场 之 后 再 公布 这 些 价 格 。 而 当 这 些 零售 
商 迁 到 网 上 之 后 ， 购 物 车 也 必须 模拟 这 一 购物 体验 。 


零售 商 们 努力 按 规矩 办 事 ， 并 且 给 顾客 极 好 的 价格 ， 结 果 购 物 者 认为 他 们 
在 玩 花 样 。 

BestBuy.com 的 设计 师 想 出 了 一 个 聪明 的 解决 办 法 。 他 们 仍然 要 求 用 户 执 
行 专门 的 操作 来 查看 价格 (服从 合约 的 硬性 要 求 )， 但 不 是 把 产品 装 进 购物 车 
里 ， 而 是 弹出 一 个 显示 价格 的 窗口 ， 上 面 有 两 个 按钮 : 查看 价格 一 一 移出 购物 
车 和 我 想 头 一 一 放 回 购物 车 。 


在 弹出 窗口 的 过 程 中 ，BestBuy.com 已 经 在 后 台 把 商品 放 进 了 购物 者 的 购 
物 车 里 。 如 果 用 户 表示 他 只 是 想 查看 价格 ， 系 统 会 自动 把 产品 移出 去 。 只 有 在 
用 户 指出 自己 想 买 这 个 物品 时 ， 它 才 会 继续 留 在 购物 车 里 。 


在 BestBuy.com 推行 该 方案 之 前 ，UIE 的 研究 员 曾 测量 过 它 建立 的 品牌 忠 
诚 度 。 他 们 发 现 ， 在 刚 遇 到 MAP 问题 时 ， 购 物 者 对 该 品牌 的 看 法 直线 下 降 。 
而 在 做 出 改动 之 后 ， 品 牌 度 又 开始 增强 。 通 过 上 述 新 设计 ， 如 今 的 顾客 们 认为 
BestBuy.com 站 在 他 们 一 边 ， 不 会 欺骗 他 们 。 无 疑 ， 在 用 户 验证 选择 的 时 候 向 他 
们 传达 正确 的 信息 ， 这 是 极为 重要 的 。 


再 次 强调 ， 我 们 可 以 使 用 多 种 设计 模式 来 协助 完成 该 任务 ， 同 时 影响 用 户 
的 行为 。 实 际 上 ， 在 对 自己 的 选择 进行 验证 时 ， 用 户 需要 的 模式 可 以 列 成 很 长 
的 一 张 表 。 以 下 是 我 们 概括 出 的 其 中 一 些 。 

1. 详细 的 条 目 描述 

以 陈列 页 上 的 简短 描述 为 基础 ， 详 细 的 条 目 描述 提供 了 范围 更 广 的 产品 概 
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况 ， 还 可 能 包含 其 他 内 容 ， 例 如 针对 电子 设备 的 技术 资料 、 针 对 书籍 的 可 编辑 
评论 ， 等 等。 


2. 图 片 库 / 查看 大 图 


电子 商务 网 站 一 般 都 会 提供 图 片 库 ( 通 常 图 片 数 量 并 不 多 ) , 以 便 用 户 以 多 
种 方式 查看 商品 ， 在 不 同 的 情境 中 查看 (例如 体型 各 异 的 模特 着 装 照 ) 或 者 从 
不 同 的 角度 查看 (正视 图 、 后 视图 等 )。 这 种 类 型 的 图 片 库 通常 都 是 缩 略 图 的 形 
式 ， 并 提供 “查看 大 图 ”选项 让 用 户 浏览 正常 大 小 的 图 片 。 这 种 方式 节省 了 屏 
幕 的 空间 ， 但 仍然 能 让 用 户 看 到 清晰 的 大 图 。 


3. 实现 细节 
这 部 分 信息 能 让 用 户 了 解 商品 的 价格 ， 以 及 它 的 送 货 速度 。 
4. 可 获得 性 


商品 的 可 获得 性 不 仅 能 提供 目标 的 状态 信息 ， 还 能 给 人 留 下 某 种 短缺 的 印 
象 。 如 果 用 户 认为 某 个 产品 是 限量 供应 的 ， 可 能 认为 它 更 有 价值 ， 更 愿意 购买 它 。 


除了 商品 、 服 务 之 类 的 网 站 外 ， 有 关 事 件 和 活动 的 网 站 也 是 一 个 很 好 的 例 
子 。 一 次 专业 会 议 可 能 最 多 拥有 200 个 与 会 者 。 随 着 不 停 地 出 票 ， 座 位 的 数量 
会 持续 减少 。 这 导致 剩 下 的 座位 对 那些 迟疑 不 决 的 访问 者 产生 了 更 大 的 吸引 力 。 


5. 物品 单 


在 商业 网 站 里 ， 愿 望 清单 或 者 简单 的 购物 清单 功能 可 以 让 用 户 标 记 目 标 商 
品 ， 作 为 将 来 的 参考 。 这 一 模式 还 能 在 用 户 一 方 建立 起 某 种 承诺 一 一 编排 这 个 
清单 的 行为 本 身 就 增加 了 他 们 回访 网 站 的 可 能 ; 


6. 配置 器 及 配置 选项 


配置 器 比 大 多 数 模式 都 要 复杂 ， 它 让 用 户 能 够 对 产品 进行 多 种 个 性 化 的 选 
择 。 在 服装 网 站 上 上， 用户 可 以 选择 尺码 和 颜色 。 如 果 要 订购 一 套 架子 鼓 ， 用 户 
可 以 选择 久 片 、 鼓 和 支架 的 种 类 ， 以 及 合 手 的 鼓 棒 。 在 MiniUSA.com” 上 ， 用 
户 可 以 在 网 页 里 自由 地 配置 一 辆 Mini Cooper， 保 存 结果 并 上 传 ， 完 全 按照 自己 
的 想法 来 订购 一 辆 梦 中 的 汽车 。 该 模式 为 用 户 提供 了 多 种 选择 所 需 配 置 的 方法 ， 


O MiniUSA.com 是 Mini Cooper 汽车 在 美国 的 网 站 。Mini Cooper 系 英国 汽车 公司 (BMC) 从 
1959 年 开始 生产 的 小 型 汽车 ， 经 久 不 衰 ， 成 为 最 受 欢 迎 的 英国 产 汽 车 ， 亦 成 为 20 世纪 60 
年 代 的 重要 标记 之 一 。2001 年 Mini Cooper 被 宝马 设计 生产 的 新 Mini 取代 。 
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便于 他 们 做 出 自 认 为 明智 的 选择 ， 因 而 感到 愉悦 。 

7. 社交 影响 模式 

社交 影响 模式 (Social Influence patterns) 包括 评论 、 评 分 、 推 荐 、 转 介 等 
功能 ， 即 通过 社交 行为 来 影响 用 户 。 产 品 页 面 通常 都 会 显示 评论 来 消除 用 户 的 
各 种 顾虑 ， 而 评分 则 提供 了 一 种 衡量 产品 质量 好 坏 的 心理 捷径 。 如 果 用 户 不 愿 
费心 为 产品 写 评 论 ， 他 也 可 以 利用 推荐 功能 来 投 一 张 赞 成 票 。 而 转 介 功 能 则 让 
用 户 把 这 个 产品 介绍 给 他 的 亲朋 好 友 。 

再 说 一 遍 ， 目 录 框 架 中 所 用 到 的 模式 在 很 大 程度 上 取决 于 网 站 的 用 途 ， 以 
及 用 户 在 特定 时 刻 的 具体 目标 。 仔 细 选 择 这 些 模式 是 非常 重要 的 。 

无 论 如 何 ， 内 容 页 意味 着 整个 搜寻 行动 的 尾声 一 一 用 户 最 后 将 在 这 里 做 出 
决定 ， 是 否 购买 一 件 商品 ， 阅 读 一 篇 文章 ， 或 者 做 其 他 事情 。 用 户 在 最 初 面临 
着 大 量 的 选择 ， 然 后 从 中 做 出 取舍 ， 最 终 得 到 自己 想 要 的 信息 。 

分 类 、 陈 列 、 内 容 。 

得 除 、 选 择 、 验 证 ， 就 这 么 简单 。 

3.6.4 引导 链接 

在 2001 年 进行 的 另 一 项 研究 中 ，UIE 思考 的 是 如 何 让 用 户 发 现 第 一 次 访问 
网 站 时 还 不 知道 的 有 价值 的 内 容 。 

应 对 大 型 网 站 时 这 个 问题 显得 尤其 重要 ， 因 为 这 些 网 站 会 不 时 地 添加 新 内 
容 。 电 子 商 务 网 站 会 添加 新 产品 ， 产 品 支持 网 站 会 添加 产品 的 使 用 贴 士 ， 内 部 
网 会 添加 新 信息 来 提高 雇员 工作 的 效率 。 用 户 如 何 才 能 发 现 这 些 新 的 内 容 呢 ? 

UIE 的 研究 显示 ， 如 果 用 户 使 用 首页 中 的 分 类 链接 ， 找 到 新 增 内 容 的 可 能 
性 要 比 直接 在 网 站 中 搜索 高 出 两 倍 。 为 了 更 深刻 地 理解 出 现 这 种 现象 的 原因 ， 
UIE 的 研究 员 们 对 数据 进行 了 深入 的 挖掘 。 

他 们 发 现 其 中 一 个 主要 的 线索 来 自 于 人 们 在 找到 目标 内 容 之 后 会 干什么 。 

目标 内 容 是 指 人 们 想 从 一 个 网 站 中 获取 的 信息 。 研 究 表明 ， 绝 大 多 数 访问 
者 访问 网 站 都 有 明确 的 目的 。 比 如 ， 几 乎 没有 人 会 只 是 因为 想 了 解 UPS Æt 


O UPS 即 联合 包 右 服务 公司 (United Parcel Service)， 它 是 世界 上 最 大 的 包 庄 快递 公司 。 总 部 
位 于 美国 佐治 亚 州 亚 特 兰 大 ， 每 天 在 全 世界 200 多 个 国家 递送 的 包 庄 超过 1 480 万 个 。 其 在 
线 服务 网 址 为 http://www.ups.com。 
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么 而 跑 去 www.ups.com。 相 反 ， 他 们 来 到 网 站 是 因为 他 们 有 明确 的 需求 ， 例 如 
追踪 包 于 的 运输 状态 ， 了 人 解 距离 最 近 的 取 货 地 点 ， 或 者 是 开办 一 个 新 账户 。 用 
户 们 来 到 网 站 时 有 着 自己 的 目标 ， 而 他 们 会 尽 最 大 努力 来 实现 这 个 目标 。 但 是 
当 他 们 实现 之 后 会 发 生 什 么 ? 设计 师 们 如 何 才 能 让 用 户 发 现 那 些 他 们 并 不 知道 、 
但 却 很 有 价值 的 内 容 呢 ? 


UIE 的 研究 得 出 了 一 些 顾 为 出 人 意料 的 统计 数据 。 很 明显 ， 用 户 到 达 目 标 
内 容 的 途径 将 会 影响 到 他 们 是 否 继续 浏览 。 


UIE 对 30 位 用 户 进行 的 调查 发 现 ， 如 果 用 户 使 用 了 网 站 的 搜索 功能 来 定位 
目标 内 容 ， 其 中 只 有 20% 的 用 户 在 找到 该 内 容 后 会 继续 查看 其 他 内 容 。 但 如 果 
是 利用 分 类 链接 来 定位 目标 ， 则 有 62% 的 用 户 会 继续 浏览 网 站 。 使 用 分 类 链接 
的 用 户 浏览 非 目 标 内 容 页 面 的 总 量 是 使 用 搜索 框 的 用 户 的 10 倍 。 


搜索 ， 哪 怕 设 计 得 再 优秀 ， 也 只 能 让 用 户 看 到 他 们 正在 寻找 的 内 容 。 如 果 
他 们 想 找 鞋 子 ， 他 们 就 只 能 得 到 鞋子 。 但 是 分 类 链接 模仿 的 则 是 在 现实 生活 中 
发 生 的 事情 。 在 一 次 跟踪 观察 人 们 在 商场 中 购物 行为 的 研究 中 是 经 过 允许 的 ， 
而 不 是 偷拍 )， 那 些 只 是 想 买 鞋 的 购物 者 走 进 商 店 ， 最 后 除了 买 到 鞋 之 外 还 购买 
了 其 他 的 商品 ， 例 如 毛衣 。 


当 用 户 接触 到 分 类 的 时 候 ， 他 们 会 不 知 不 觉 地 认识 到 网 站 中 还 有 其 他 有 价 
值 的 内 容 。 许 多 用 户 告诉 UIE 的 研究 员 ， 在 定位 目标 内 容 时 ， 他 们 在 心理 上 会 
认为 应 该 “回去 再 看 看 ”那些 其 他 的 内 容 。 


如 果 用 户 选 择 了 搜索 ， 就 会 失去 看 到 网 站 提供 的 其 他 内 容 的 机 会 〈 除 非 是 
搜索 功能 出 现 了 问题 ， 显 示 了 用 户 并 未 要 求 的 内 容 )。 原 因 很 简单 ， 搜 索 的 针对 
性 太 强 了 。 


而 引导 链接 能 够 解决 这 一 问题 。 


引导 链接 并 不 复杂 ， 只 是 一 些 指向 网 站 其 他 内 容 的 链接 而 已 。 而 正 是 因为 
有 了 它们 ， 用 户 才能 进行 辨别 。 也 正 因 如 此 ， 几 乎 任何 一 个 大 型 目录 网 站 里 的 
任何 一 个 分 类 页 、 陈 列 页 和 内 容 页 都 会 为 浏览 者 提供 引导 链接 。 

当 你 在 JCPenney.com” 上 深入 到 Tees and Pullovers CT WME) 子 类 时 
《在 男装 部 衬衫 类 下 方 )， 陈 列 页 的 边栏 会 出 现 指 向 JC Penney 其 他 衬衫 的 链接 ， 
如 图 3-12 所 示 。 


O JC Penney 是 一 家 美国 的 高 档 连锁 百货 商场 CHIE 1 106 R, WHER 50 个 州 )。 
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ae men 会 > men > shirts > tees + pullovers 
供 的 链接 指向 其 
他 类 型 的 衬衫 yes select 
dockers sort by: price in stores 
levis 
st. John's bay Items 1-15 of 23 ENE 
more brands 
shop by category 
big & tall 
shirts 
dress shirts 
polos 
button-front 
tees + pullovers 
vests 
fleece 
big & tall 
BUY MORE and SAVE 
custom fit St. John's Bay® "Fairway Golf" Screen 
clearance Print Tee 
sweaters Reg. $20.00 
pants Buy More $9.99 ea. 
jeans Also In Stores 


Bestbuy.com 的 入 耳 式 耳 赛 子 类 也 有 链接 指向 其 他 陈列 页 ， 突 出 了 特定 的 品 
牌 、 特 性 、 价 格 范围 ， 甚 至 还 有 颜色 。 


就 图 书馆 而 言 ， 普 利 茅 斯 大 学 ”(http:Wlibrary.plymouth.edu) 使 用 了 
Scriblio”， 一 种 基于 WordPress 的 开源 图 书馆 目录 系统 作为 其 目录 系统 的 前 端 ， 
如 图 3-13 所 示 。 普 大 的 网 站 不 仅 提 供 了 分 类 页 、 陈 列 页 和 内 容 页 的 标准 组 合 ， 
此 外 还 提供 了 引导 链接 以 便 用 户 发 现 与 目标 内 容 相关 的 其 他 资料 。 


利用 引导 链接 ， 用 户 可 以 通过 某 个 具体 项 目的 作者 、 相 关 课题 、 甚 至 图 书 
馆 的 完整 项 目 记 录 来 找到 各 种 内 容 。 


引导 链接 名 副 其 实 : 它们 引导 用 户 找 到 其 他 的 内 容 。 更 多 的 点 击 ， 更 多 的 
条 目 被 浏览 ， 为 用 户 带 来 更 多 的 价值 ， 更 多 的 商业 目标 。 


© 普利茅斯 大 学 (Plymouth State University, PSU) 是 英国 英格兰 西南 部 规模 最 大 的 大 学 ， 在 
校生 人 数 超过 三 万 ， 位 于 全 英 第 四 位 。 

© Scriblio 是 一 种 基于 博客 软件 WordPress 的 跨 平 台 开源 在 线 公 共 检 索 分 目 系 统 (Online public 
access catalog，OPAC)。 它 是 普利茅斯 大 学 的 项 目 ， 原 名 WPOPAC， 曾 获 开 源 软 件 的 2006 
梅 隆信 息 协 作 奖 ， 是 图 书馆 界 的 唯一 获奖 者 。 
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Home » Computer Sciences 


Computer Sciences 
Roger R. Flynn, editor in chief 
Computer 


Publication Details Sciences 
Book, Macmillan, 2002 Volume 2 


LOCATION CALL # STATUS 
QA76 .C572 2002 v.1 AVAILABLE 


QA76 .C572 2002 v.2 AVAILABLE 


QA76 .C572 2002 v.3 AVAILABLE 


uU AIN) x QA76 .C572 2002 v.4 AVAILABLE 


New Feature: Browse on Google - Text this to your cellphone 
View record in LOLA catalog 


Links 

» READ FULL-TEXT ONLINE 
Subject 

» m E jenct 


» Computer science — Electronic information resource 
» LAMSON LIBRARY LINKS TO ELECTRONIC INFORMATION RESOURCES 


3.7 设计 标准 

回 到 UTE 在 2002 年 进行 的 那 次 调查 〈 从 中 得 到 的 经 验 在 今天 也 非常 适用 ， 
而 且 最 近 多 次 研究 也 证 明了 这 一 点 )， 被 调查 各 网 站 间 最 主要 的 不 同 就 在 于 分 类 
页 面 。 在 13 个 被 调查 的 网 站 中 ，UIE 的 研究 员 发 现 了 5 种 不 同 的 分 类 页 设计 。 
其 中 大 多 数 网 站 都 把 分 类 列 在 屏幕 左边 的 导航 面板 中 ， 同 时 在 页 面 的 主要 内 容 
区 域 列 出 该 分 类 下 的 所 有 条 目 。 不 过 一 些 网 站 则 表现 得 更 为 明智 。 


Gap (www.gap.com) 和 Victoria's Secret ^ (www.victoriassecret.com) 都 使 


用 了 菜单 而 不 是 页 面 来 表现 顶级 分 类 。 


Old Navy ^ Cwww.oldnavy.com) 把 商店 各 部 门 和 陈列 的 产品 混合 到 一 起 ， 
其 导航 有 时 包含 陈列 页 ， 有 时 则 包含 具体 产品 。 


Lands’End® Cwww.landsend.com) 的 分 类 页 设计 则 既 有 各 个 部 门 ， 又 有 直 
接 的 产品 描述 。 


O Victoria's Secret〈 维 多 利 亚 的 秘密 ) 是 美国 的 一 家 连锁 女性 成 衣 零 售 店 ， 主 要 经 营 内 衣 。 
2006 年 在 美国 的 销售 额 超过 50 亿美 元 。 

© Old Navy 是 隶属 Gap 的 一 家 服装 连锁 零售 店 。 目 标 群 体 是 喜爱 时 尚 的 人 ， 但 价格 与 Gap TH 
比较 为 低廉 。 

G Lands’End 主要 经 营 休闲 服饰 、 箱 包 和 家 具 。 


图 3-13 

为 图 书馆 打造 的 
Scriblio 系 统 提供 
了 引导 链接 
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最 后 ，Eddie Bauer” (www.eddiebauer.com) 显示 了 部 门 中 所 有 产品 的 文字 
列表 ， 各 条 目 都 能 从 当前 状态 切换 到 显示 多 幅 图 片 的 状态 。 


在 意识 到 部 门 页 的 基本 类 型 多 达 5 种 之 后 ， 研 究 目标 变 成 了 观察 不 同 的 类 
型 是 否 会 导致 不 同 的 用 户 行为 。 虽 然 UIE 预计 到 这 些 网 站 的 表现 肯定 不 尽 相 
同 ， 但 尚 不 清楚 其 中 是 否 有 某 个 类 型 会 脱颖而出 。 


正如 UIE 大 多 数 针 对 电子 商务 的 调查 一 样 ， 他 们 邀请 参与 者 按照 清单 购买 
一 系列 产品 。 参 与 者 领 到 足够 金额 的 钱 ， 然 后 被 告知 要 尽 可 能 多 地 购买 手中 清 
单 上 的 商品 。 在 此 次 研究 中 ，44 位 用 户 共计 购买 了 687 件 商品 。 观 察 结 束 之 
后 ，UIE 团队 比较 了 人 们 在 各 网 站 中 的 购买 行为 。 


那些 采用 标准 的 左边 导航 栏 的 网 站 ， 例 如 Macy’s”， 表 现 得 最 差 ， 卖 掉 的 
商品 最 少 。 而 Lands’ End 的 设计 ， 页 面 中 既 有 产品 描述 又 有 商店 部 门 ， 表 现 得 
最 好 。Old Navy 部 门 与 陈列 页 相 混合 的 设计 位 居 第 二 。 


在 研究 过 程 中 ， 用 户 把 商品 放 入 购物 车 之 前 访问 的 页 面 数量 与 他 们 的 购买 
量 成 反比 。 访 问 的 页 面 越 多 ， 买 的 商品 就 越 少 。( 别 忘 了 ， 这 些 用 户 知道 自己 想 
买 什么 产品 ， 也 做 好 了 购买 的 准备 。) 


在 Lands” End 的 网 站 里 ， 用 户 把 商品 放 进 购物 车 之 前 访问 的 页 面 数 量 是 
Macy's 的 1/3. Lands’ End 的 用 户 进入 错误 陈列 页 的 次 数 较 少 (错误 陈列 页 指 
的 是 并 不 包含 用 户 目 标 内 容 的 陈列 页 。 它 们 会 迫使 用 户 点 击 浏览 器 的 后 退 按钮 ， 
这 一 举动 本 身 就 说 明 产 生 了 问题 )。 


不 过 ， 如 今 许 多 网 站 都 使 用 了 多 层级 的 组 织 方式 ， 例 如 BestBuy.com, E 
们 通过 分 散在 多 个 页 面 中 的 多 个 分 类 级 别 来 支持 用 户 的 筛 除 过 程 。 这 其 实 是 一 
条 颇 为 可 行 的 办 法 ， 因 为 如 果 不 能 带 来 商业 收益 的 话 ， 那 些 主流 零售 商 绝 不 会 
多 此 一 举 。 这 一 事实 告诉 我 们 ， 真 正 降低 用 户 购 买 欲望 的 ， 并 不 是 大 量 的 点 击 ， 
而 是 大 量 的 不 正确 点 击 。 用 户 点 击 后 却 找 不 到 目标 内 容 的 页 面 越 多 ， 他 们 完成 
任务 的 可 能 性 就 越 小 。 


因此 ， 创 新 之 路 似乎 在 于 让 目标 选择 的 过 程 更 为 精确 。 
那么 如 何 让 这 一 过 程 变 得 更 加 精确 呢 ? 我 们 必须 观察 在 当前 标准 中 的 人 类 


(D Eddie Bauer 连锁 服装 店 成 立 于 1920 年 ， 目 前 有 3 种 独立 的 销售 渠道 : 零售 店 、 折 扣 店 以 及 

直销 中 心 。 

O Macy's〈 梅 西 百货 公司 ) 隶属 于 美国 联邦 百货 公司 ， 它 的 旗舰 店 位 于 纽约 ，1924 年 开张 时 
曾 被 宣传 为 “世界 最 大 商店 ”。 该 公司 还 有 2 个 全 国 性 旗舰 店 及 数 个 地 区 性 的 旗舰 店 。 
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行为 ， 然 后 再 推理 出 新 的 设计 标准 ， 从 而 产生 出 新 颖 、 改 良 后 的 设计 。 


首先 ， 我 们 知道 人 们 喜欢 在 目录 中 探索 。 网 上 购物 和 在 实体 店 里 购买 商品 
是 一 样 的 。 并 不 知道 自己 想 买 什么 的 用 户 ， 需 要 四 处 看 看 ， 去 发 现 内 容 。 知 道 
想 买 什么 ， 却 不 知道 它 叫 什 么 的 用 户 则 需要 通过 触发 词 (trigger word) 来 逐步 
缩小 选择 范围 。 而 那些 明确 知道 要 买 什么 ， 也 知道 怎样 搜索 的 用 户 ， 他 们 也 仍 
然 需要 有 机 会 四 处 看 看 ， 说 不 定 能 发 现 什么 还 没 想到 的 相关 物品 。 


其 次 ， 我 们 知道 用 户 乐 意 遵 循 得 除 、 选 择 、 验 证 这 3 个 步骤 的 目标 选择 过 
程 。 


最 后 ， 我 们 知道 即使 有 着 良好 的 引导 链接 ， 但 用 户 心目 中 对 内 容 的 分 类 方 
法 和 大 部 分 网 站 也 很 难 做 到 完全 一 样 。 同 样 一 件 商品 ， 有 人 认为 是 垃圾 ， 有 人 
则 认为 是 无 价 之 宝 。 


那么 我 们 应 该 怎样 处 理 这 些 问题 呢 ? 


抛 开 一 句 空洞 的 “设计 出 更 好 的 分 类 页 和 陈列 页 ”我 们 怎样 才能 真正 防止 
用 户 进行 不 正确 的 点 击 ? 在 无 法 掌握 每 一 个 用 户 描 述 商 品 时 使 用 的 词语 的 情况 
下 ， 我 们 又 该 怎样 才能 鼓励 和 帮助 他 们 对 网 站 进行 探索 ? 如 果 不 按部就班 地 使 
用 上 述 的 那些 目录 元 素 ， 我 们 是 否 还 能 对 目标 选择 过 程 的 三 个 步 又 提供 支持 ? 


答案 就 在 设计 标准 之 中 。 
3.7.1 支持 用 户 的 探索 


之 前 提 到 过 ，Web 用 户 在 目录 中 寻找 已 知 对 象 时 会 极度 依赖 搜索 功能 。 想 
到 这 一 点 ， 人 们 很 容易 就 会 相信 目录 站 点 根本 不 需要 包含 所 有 的 标准 元 素 ， 只 
要 提供 网 站 范围 内 的 搜索 功能 就 行 了 。 毕 况 ， 搜 索 可 以 直接 把 用 户 带 向 他 们 的 
目标 内 容 ， 而 无 需 通 过 复杂 的 层次 结构 来 寻找 目标 内 容 分 类 。 


但 也 许 你 会 意识 到 ， 人 们 使 用 搜索 功能 并 不 一 定 意味 着 他 们 依赖 于 网 站 本 
身 的 搜索 。 事 实 上 ， 他 们 更 多 会 依靠 外 部 的 搜索 引擎 ， 例 如 谷歌 和 雅虎 来 寻找 
产品 ， 然 后 直接 访问 在 搜索 结果 中 位 居 前 列 的 网 站 。 出 于 这 个 (以 及 我 们 将 要 
讨论 的 其 他 几 个 原因 ， 不 仅 目 录 本 身 需 要 适应 网 络 的 浏览 方式 ， 在 整个 过 程 
中 涉及 的 页 面 也 必须 维持 独立 的 URL， 以 及 合适 的 页 面 标题 和 内 容 。 只 有 这 样 
搜索 引擎 才能 索引 到 正确 的 内 容 ， 这 些 页 面 才能 出 现在 搜索 结果 里 面 ， 从 而 增 
加 网 站 访问 量 。 


图 3-14 
Polaris 颇 为 令 人 
疑惑 地 把 产品 信 
息 放 在 了 搜索 结 

果 页 中 
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为 了 说 明 这 一 点 ， 让 我 们 看 看 一 个 标准 目录 体系 的 反 设计 模式 ， 以 此 了 解 
当 网 站 没有 按 上 述 方式 构建 时 会 发 生 些 什么 。( 设 计 模式 是 针对 某 个 常见 问题 的 
常用 解决 方案 ， 而 反 设 计 模 式 则 是 针对 这 个 问题 通常 的 无 效 解决 方案 。 它 不 应 
被 当做 解决 方案 ， 但 却 时 常 被 采用 ， 以 至 于 变 成 了 一 个 模式 。 其 无 效 性 必须 被 
指出 。) 


Clinton-Macomb 公共 图 书馆 ”的 网 站 Chttp//empl.org) 构建 在 一 个 名 为 
Polaris ”的 图 书馆 目录 系统 之 上 。 据 称 Polaris 是 市 面 上 最 好 的 图 书馆 分 目 系统 
之 一 ， 但 它 却 与 大 多 数 成 功 的 目录 网 站 〈 包 括 本 章 讨 论 过 的 那些 零售 商 ) 所 建 
立 的 标准 背道而驰 。 当 用 户 在 Clinton-Macomb 图 书馆 网 站 上 查找 内 容 时 ， 他 们 
既 不 能 在 分 类 中 来 回 查 阅 ， 也 看 不 到 任何 能 够 选择 条 目的 陈列 页 。 


实际 上 ， 系 统 压根 就 没有 提供 任何 分 类 页 ， 而 且 条 目的 细节 只 会 在 搜索 结 
果 页 显示 ， 不 会 在 单独 的 内 容 页 显示 (参见 图 3-14)。 


Matches: 133 Displaying titles 1 - 10 Page: 4 [1] 2 3 4 5...14 p 


Details: xiv, 347 p.; 23 cm. NoveList 

Librarian's View 
What's available now: 0 (of 1) AAA 
Number of Holds: 0 


Call Number: 823.914 V 


Title: The Lexicon : an unauthorized guide to Harry Potter fiction and related material / 
Steve Vander Ark, with John Kearns, Lisa Waite Bunker, Belinda Hobbs. 
Author: Vander Ark, Steve. 
Other Author: Kearns, John. 
Bunker, Lisa Waite. 
Hobbs, Belinda. 
Publisher, Date: Muskegon, Mich. : RDR Books, c2009. 
Details: xiv, 347 p.; 23 cm. 
Subject: Rowling, J.K. -- Characters. 
Rowling, J.K. -- Stories, plots, etc. 
Potter, Harry (Fictitious character) -- Miscellanea. 
Notes: Includes bibliographical references. 
ISBN: 9781571431745 


1571431748 
(gi 2. Harry, a history : the true story of a boy wizard, his fans, and life inside Add to My List 
Write a review the Harry Potter phenomenon 


2008 by Anelli, Melissa. 


Edition: 1st Pocket Books trade pbk. ed. 
Details: xii, 356 p., [8] p. of plates : ill. 


© Clinton-Macomb 公共 图 书馆 (Clinton-Macomb Public Library, CMPL) 是 位 于 美国 密歇根 州 
克林顿 宪章 镇 (Clinton Charter Township) 的 地 区 图 书馆 。1992 年 成 立 。 

O Polaris 〈 北 极 星 ) 是 以 地 方 性 图 书馆 为 市 场 目标 的 综合 图 书馆 系统 。 目 前 有 1000 多 家 图 书 
馆 都 在 使 用 该 系统 。 网 站 是 http:Wwww.gisinfosystems.com。 
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这 是 个 相当 严重 的 问题 。 之 所 以 这 么 说 有 以 下 几 个 原因 。 


首先 ， 在 电子 商务 研究 中 ，UIE 观察 到 的 687 次 购物 过 程 中 ， 用 户 只 用 
22% 的 时 间 使 用 网 站 的 搜索 引 敬 。 这 意味 着 他 们 在 其 余 78% 的 时 间 里 都 是 使 用 
分 类 方式 来 定位 商品 的 。 但 是 ， 由 于 Polaris 系统 里 面 没有 分 类 页 ， 用 户 不 能 
用 最 基本 的 而 且 颇 为 喜爱 的 方式 进行 浏览 了 。 他 们 只 能 去 搜索 ， 因 为 要 想 找 到 
内 容 就 只 有 这 一 种 方式 。 目 标 选择 过 程 中 的 第 一 步 是 第 除 ， 而 没有 分 类 页 ， 我 
们 就 无 法 进行 第 除 。 

另 一 个 结果 是 ,“ 偶 然 发 现 ” 的 可 能 性 也 被 剥夺 了 一 一 用 户 无 法 再 意外 地 发 
现 自己 尚 不 知道 的 其 他 目标 。 他 们 只 能 找到 那些 “ 想 要 并 且 已 知 ”的 东西 ， 而 
那些 “ 想 要 却 尚未 发 现 ” 的 东西 就 无 缘 相 见 了 。 


其 次 ,公共 图 书馆 的 一 切 都 极度 依赖 州 政府 和 联邦 政府 的 财政 支持 ， 不 管 
是 支付 员工 薪水 ， 举 办 活动 ， 筹 备 社区 项 目 ， 还 是 集资 扩大 馆藏 ， 任 何事 情 英 
不 如 此 。 但 如 果 内 容 页 面 没 有 独立 的 URL， 目 录 中 的 各 个 条 目 就 无 法 被 搜索 引 
擎 收录 。 问 题 非 常 明显 : 网 站 的 访问 率 越 高 ， 图 书馆 的 名 气 就 越 大 ， 图 书馆 名 
气 越 大 ， 政 府 就 会 提供 更 多 的 资金 ， 让 它 成 为 社区 里 更 优良 的 资源 ， 从 而 为 网 
站 带 来 更 多 的 访客 。 而 这 一 切 的 前 提 是 用 户 能 够 通过 Google 找到 当地 图 书馆 的 
资料 。Polaris 在 这 个 等 式 中 拿 走 了 可 供 索 引 的 内 容 页 ， 那 么 很 可 能 会 使 自己 的 
客户 失去 大 量 的 机 会 。 


再 次 ， 缺 少 内 容 页 〈 而 且 搜索 结果 中 的 条 目 缺 少 独 立 URL) 将 剥夺 用 户 为 
内 容 添 加 书签 的 权利 。 如 果 没 有 独立 的 URL， 用 户 最 多 只 能 为 搜索 结果 页 面 添 
加 书签 ， 日 后 访问 时 必须 在 搜索 结果 中 点 击 该 条 目 才能 显示 细节 。( 值 得 表扬 的 
是 ，Polaris 用 户 确实 可 以 在 搜索 结果 中 为 某 个 条 目 添 加 书签 。 但 是 ， 这 种 书签 
的 URL 是 根据 该 条 目 在 搜索 结果 中 的 当前 排名 决定 的 ， 与 它 的 标题 或 者 ID 无 
关 ， 因 此 如 果 该 条 目的 排名 在 将 来 发 生 了 变化 ， 书 签 将 失去 作用 。) 


最 后 ， 由 于 没有 单独 的 内 容 页 ， 用 户 将 被 迫 在 搜索 结果 的 上 下 文中 检验 自 
己 的 选择 是 否 正确 。 而 本 质 上 ， 这 里 其 实 是 一 个 陈列 页 ， 页 面 中 的 其 他 条 目 很 
可 能 在 用 户 评估 时 分 散 他 们 的 注意 力 。 在 图 书馆 目录 中 ， 任 何 一 次 搜索 都 会 产 
生 大 量 的 信息 ， 而 把 它们 一 次 性 全 部 都 显示 出 来 ， 无 疑 会 造成 一 种 混乱 的 体验 
(也 许 这 还 只 是 最 好 的 结果 )。 


那么 Polaris 为 什么 要 这 样 设计 他 们 的 目录 系统 呢 ? 原因 和 其 他 许多 设计 一 
样 : 对 什么 是 “高 质量 的 用 户 体验 ”的 理解 是 错误 的 ， 而 且 以 这 种 错误 的 理解 


Gap .com#24 
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为 基础 来 改进 应 用 。 在 很 多 情况 下 ，Web 团队 似乎 认为 他 们 能 通过 减少 完成 任 
务 所 需 的 点 击 数量 来 帮助 用 户 。 但 很 明显 ， 这 种 想法 是 错误 的 : 在 用 户 尝试 完 
成 任务 时 ， 他 们 需要 的 是 条 理 清 楚 ， 点 击 的 次 数 多 少 一 点 都 不 重要 。 


顺便 说 一 句 ，Gap.com 如 今 使 用 了 这 种 技术 的 一 个 变 体 。 在 陈列 页 中 ， 用 
户 把 鼠标 移动 到 某 件 商品 上 时 ， 会 显示 Quick Look CREARA) 选项 ， 点 击 该 
选项 后 会 出 现 一 个 悬 停 层 ， 用 户 可 以 在 上 面 选择 商品 尺寸 ， 将 商品 加 入 购物 车 
或 者 进行 其 他 操作 (参见 图 3-15)。 我 们 认为 两 者 的 关键 区 别 在 于 ，Gap 并 没有 
用 这 种 技术 来 提供 商品 的 信息 《这 应 该 是 在 筛 除 过 程 中 )， 而 是 为 了 让 用 户 能 
对 该 条 目 进行 操作 。 而 且 与 Polaris 不 同 的 是 ，Gap 采用 这 种 方案 是 为 了 辅助 内 
容 页 ， 而 不 是 代替 它 。 


Q view larger 


E 1 J iv j | A 
Mm PU | i | 
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Perfect wash Beauclaire striped 
shirt 
Imported. 


这 意味 着 ， 也 许 目 标 选择 的 过 程 是 可 以 进一步 提炼 的 一 一 不 是 说 我 们 要 前 
减 分 类 页 、 陈 列 页 和 内 容 页 中 的 信息 或 功能 ， 而 是 把 原本 的 三 个 步 又 精简 为 一 
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到 两 个 。 当 然 ， 这 是 相当 冒险 的 一 步 棋 一 一 Polaris 本 来 打算 这 么 做 ， 但 它 却 用 
搜索 引擎 代替 目录 结构 ， 结 果 两 方面 都 没有 讨 到 好 处 。 


不 过 我 们 可 以 看 看 Panic" 在 他 们 的 网 站 上 卖 工 恤 时 是 怎么 做 的 。 
Tie, Panic 提供 的 了 恤 选 择 很 有 限 ， 所 以 网 站 不 需要 分 类 页 。 


其 次 ，Panic 所 有 工 恤 的 制作 方法 都 是 一 样 的 ， 所 以 他 们 创建 了 一 个 专门 
的 About Our Shirts (FFT THO 页 面 ， 而 不 是 为 每 一 件 工 恤 都 列 出 护理 
信息 。 不 同 颜色 的 工 恤 都 会 并 排 显示 ， 不 用 先进 入 内 容 页 再 选择 颜色 。 点 击 某 
件 工 恤 会 弹出 一 个 小 窗口 ， 里 面 有 该 产品 的 其 他 几 张 图 片 。 用 户 看 中 一 件 T 恤 
后 ， 唯 一 需要 做 的 就 是 选择 尺寸 、 件 数 然后 添加 进 购物 车 。Panic 不 需要 内 容 页 
就 可 以 满足 这 些 需求 。 


如 图 3-16 所 示 ， 每 一 件 T 恤 图 片 的 下 方 显示 了 它 的 价格 ， 以 及 订购 数量 、 
尺寸 大 小 和 加 入 购物 车 3 个 选项 。 购 物 车 在 页 面 的 最 底部 ， 用 户 可 以 把 了 恤 拖 
进 购物 车 ， 或 者 点 击 产品 旁边 的 那个 加 号 图 标 。 


PANIC DESIGNS wc sassen nerdy shirts that aren't too nerdy 
Spinner $19 Software $19 Dragon $19 - Sold Out 
GS) Gu) ep GS Gui) qe Want one? Know first: join the eList! 


1 
& shopping cart 
jy drag any item here to add it to your cart 


所 有 这 些 因 素 加 起 来 的 结果 是 ，Panic 能 够 在 一 个 页 面 中 表现 它 的 整个 目录 
站 点 ， 而 这 不 仅 支 持 了 用 户 的 目标 选择 过 程 ， 同 时 还 完全 避免 了 不 正确 点 击 的 


O Panic 是 一 家 位 于 美国 俄勒冈 州 的 软件 公司 ， 主 要 开发 Mac OS 下 的 应 用 程序 。 该 公司 同时 
也 出 售 一 些 自 行 设 计 、 图 案 简单 的 工 恤 ， 包 括 panic、katamari 和 noby noby boy 三 个 子 品 
牌 。 网 址 为 http:/www.panic.com/goods/。 


图 3-16 


Panic.com 没 有 使 


= 个 


类 页 ,购物 


的 交互 界面 只 有 
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问题 。 用 户 们 绝 不 会 访问 到 无 关 的 页 面 ， 因 此 也 就 不 会 被 迫 点 击 “ 回 退 ” 按 钮 ， 
重新 开始 。 


我 们 无 法 得 到 有 关 Panic 网 站 可 用 性 研究 的 任何 结果 ， 也 不 清楚 他 们 的 评 
Hn. OETA a Pier 一 致 ， 所 以 不 难 猜测 这 种 方 
还 是 蛮 不 错 的 。 最 起 码 它 让 目录 设计 师 们 有 了 全 新 的 想法 。 


《纽约 时 报 》 则 提供 了 另 一 种 方式 ， 试验 性 质 的 Article Skimmer”, Wikje 


prototype.nytimes.com/gst/ articleSkimmer/。 


通过 这 种 标新立异 的 设计 ， 用 户 能 够 快速 浏览 任何 一 个 分 类 中 的 新 闻 故 事 ， 
只 eb iE SU MR, NYTimes.com 早已 支持 这 一 行 
同一 个 可 视 的 空间 里 面 ， fea E e 以 更 好 地 帮助 
用 户 决定 是 否 点 击 。 这 使 得 用 户 在 一 到 两 分 钟 之 内 就 能 浏览 到 整个 网 站 的 重要 
新 闻 ， 如 图 3-17 所 示 。 
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《纽约 时 报 》 的 Article Skimmer 用 于 快速 浏览 新 闻 标 题 


从 最 基本 的 层面 来 说 ， 我 们 必须 支持 用 户 对 整个 目录 的 搜索 需求 ， 而 且 无 
需 他 们 搜索 那些 已 知 的 条 目 或 分 类 。 


O Article Skimmer 文章 快 读 ) 是 纽约 时 报 为 其 在 线 内 容 推 出 的 一 款 阅 读 器 。 目 ipa “为 
在 线 读 者 提供 另 一 种 阅读 新 闻 的 方式 ， 并 根据 读者 喜爱 的 挑选 方式 来 更 新 内 容 ”， 该 款 阅读 
器 最 新 版 本 的 导航 目录 在 浏览 器 右 侧 。 
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此 外 ， 用 户 应 该 能 按照 自己 的 思维 模式 来 找到 想 要 的 内 容 ， 不 管 他 们 怎么 
称呼 它 。 


3.7.2 ”公布 分 类 方法 


对 于 同一 个 内 容 ， 不 同 的 用 户 对 它 是 什么 ， 有 什么 意义 以 及 它 应 该 叫 什么 
都 有 着 自己 的 看 法 。 为 了 让 用 户 能 够 根据 自己 的 想法 来 找到 内 容 ， 我 们 可 以 让 
他 们 为 内 容 创建 自己 的 标签 ， 证 每 一 个 条 目 关 联 不 同 的 词汇 ， 从 而 提高 它们 的 
可 查找 性 。 


如 何 组 织 信 息 对 于 亚马逊 网 站 (Amazon.com) 来 说 一 直 都 是 个 疆 梦 它 
提供 了 上 百 万 件 商品 ， 而 这 其 中 的 每 一 件 都 必须 能 让 用 户 找到 ， 不 管 是 他 们 有 
此 需求 还 是 偶然 之 举 。 


尽管 亚马逊 用 标签 页 来 划分 内 容 的 界面 设计 在 20 世纪 90 年 代 早期 曾经 一 
路 领先 ， 也 让 这 一 模式 扬名 四 海 ”， 但 最 终 它 仍然 满足 不 了 其 自身 的 日 益 增 长 。 
分 类 大多 ， 内 容 太 多 。 随 后 该 公司 不 断 地 尝试 各 种 导航 设计 ， 其 中 提供 了 一 个 
比较 耐人寻味 的 选项 ， 即 允许 用 户 为 产品 创建 标签 ， 如 图 3-18 所 示 。 


Suggested Tags from Similar Products ( what's this?) 
Be the first one to add a relevant tag (keyword that's strongly related to this product). 
Check a corresponding box or enter your own tags in the field below. 


LJ blogging (73) O blogger (31) © ess (12) 

LJ wordpress (55) O blog design (20) O bloggers (20) 
© blog (52) O make money online (30) O design (12) 
© blogs (48) LJ php (14) 

Your tags: 


(Press the 'T' key twice to quickly access the "Tag this product" window.) 


亚马逊 不 再 坚持 自己 定义 的 严格 分 类 方法 ， 而 是 让 用 户 来 控制 它 ， 增 强 了 
分 类 法 的 可 扩展 性 〈 最 后 产生 了 分 众 分 类 法 ”)。 如 今 亚 马 逊 的 顾客 们 可 以 自行 
决定 如 何 分 类 产品 ， 日 后 亦 能 根据 自己 的 偏好 来 找到 内 容 ， 而 且 他 们 在 这 一 过 


O 亚马逊 网 站 普及 了 标签 页 的 导航 方式 ， 使 大 量 的 产品 能 清晰 地 呈现 在 用 户 眼前 。 在 1998 年 
网 站 只 有 两 个 一 级 大 类 《书籍 和 音乐 )， 通 过 颜色 用 户 能 轻易 地 区 分 产品 。 但 从 1999 年 到 
2000 年 ， 亚 马 逊 不 断 增加 新 的 分 类 ， 直 到 包括 电器 、 软 件 、 保 健美 容 、 玩 具 与 游戏 、 电 子 
贺卡 、 艺 术 与 收集 等 共 15 个 分 类 ， 达 到 了 标签 页 导航 的 极限 ， 最 后 甚至 得 把 标签 页 分 成 两 
排 才能 显示 网 站 的 logo。 这 一 现象 作为 界面 设计 的 典型 案例 为 许多 人 津津 乐 道 。 

Q 分 众 分 类 法 (Folksonomy) 一 词 由 Folks CAF) FM Taxonomy (分 类 法 ) 组 合 而 成 ， 如 今 
已 是 信息 架构 学 中 的 一 个 重要 部 分 。 它 是 指 用 户 自 发 性 以 任意 关键 字 ORE) 为 内 容 进行 
分 类 的 一 种 公开 共享 的 平面 型 非 层 级 结构 式 分 类 法 ， 目 前 被 用 于 许多 社会 性 网 站 及 软件 中 。 


图 3-18 


Amazon.com 


许 户 选择 [ 


喜欢 的 词 ; 


CAL 


织 产 品 


70 第 3 章 目录 框架 


程 中 或 许 还 会 帮助 无 数 的 其 他 用 户 ， 因 为 创建 的 标签 同样 可 能 符合 其 他 人 的 思 
维 模式 。 


鼓励 探索 ， 扩 大 访问 者 寻找 内 容 时 所 用 的 文字 范围 ， 这 两 者 绝 不 是 什么 开 
创 性 的 概念 。 但 作为 设计 标准 ， 它 们 一 定 能 帮助 我 们 启发 新 的 思路 。 但 愿 有 一 
天 ， 我 们 能 看 到 各 大 主流 商务 、 图 书馆 、 资 料 库 、 新 闻 以 及 其 他 基于 目录 的 网 
站 都 能 真正 支持 用 户 的 需求 ， 而 不 仅仅 只 是 把 真实 世界 的 流程 照搬 到 网 络 上 来 。 


也 许 有 一 天 ， 本 需要 一 周 才能 完成 购买 的 食品 ， 我 们 只 需 一 两 下 点 击 就 能 
完成 。 


IE REDS 


Ley 到 搜索 工具 ，Google Hit ELSE MA EA tHE AS. EKE, 
JAE 如 果 某 个 网 站 的 站 内 搜索 引擎 看 上 去 或 者 用 上 去 不 像 Google， 用 户 就 会 
迟疑 ， 甚 至 会 质疑 它 的 可 靠 性 。 而 Google 这 位 搜索 大 师 到 底 是 哪里 有 效 ， 大 多 
数 人 其 实 知之 甚 少 ， 但 他 们 就 是 信赖 它 。 对 很 多 人 来 说 ， 事 实 就 是 这 样 
狗 很 可 爱 ， 虫 子 很 恶心 ， 而 Google 很 有 效 。 


MBA, Google 究竟 是 怎样 取得 如 此 成 就 的 ? 我 们 怎样 才能 在 站 内 搜索 中 应 
用 Google 的 经 验 ， 得 到 有 效 的 结果 和 平民 化 的 交互 ? 一 个 好 的 搜索 引擎 界面 到 
底 需 要 什么 元 素 ? 它们 怎样 才能 更 为 高 效 ? 


第 一 眼看 上 去 ， 搜 索 框架 似乎 很 简单 。 比 如 ，2008 年 7 月 ，Adaptive Path 
公司 "的 Chiara Fox ° 就 是 这 样 形容 该 框架 中 的 一 个 关键 元 素 的 (原文 见 http:/ 
www.adaptivepath.com/blog/2008/07/14/ designing-search-checklist/) : 


小 


| 最 近 的 几 个 项 目 中 我 发 现 自己 设计 了 不 少 搜索 结果 页 面 。 虽 然 说 每 个 项 目 
| 都 有 自己 的 一 套 需 求 ， 细 节 也 各 不 相同 ， 但 我 认为 有 些 元 素 应 该 是 任何 结 


O Adaptive Path 是 一 家 用 户 体 验 顾问 及 培训 公司 。 其 产品 Measure Map 曾 被 Google 收购 ， 后 
演变 为 今天 的 Google Analytics。 公 司 网 站 是 http://www.adaptivepath.com. 

O Chiara Fox 是 任职 于 Adaptive Path 的 高 级 用 户 体验 设计 师 ， 成 功 地 为 许多 财富 100 强 及 500 强 
公司 的 内 联网 、 信 息 网 和 电子 商务 网 站 开发 了 信息 架构 。 个 人 网 站 是 http://chiaraogan.com/。 
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果 页 的 界面 中 都 需要 的 。 以 这 些 元 素 开 始 ， 然 后 根据 情况 稍 加 修改 ， 我 想 
你 就 能 得 到 一 个 很 不 错 的 页 面 。 


以 下 是 我 所 列 的 一 个 清单 ， 排 名 不 分 先后 。 


口 在 搜索 结果 中 突出 显示 查询 词 。 

口 在 结果 页 面 重 述 查 询 条 件 。 

口 显示 已 找到 的 结果 数量 。 

口 包含 “前 一 个 ”和 “后 一 个 ”按钮 以 及 其 余 页 面 的 链接 ， 以 便于 在 结果 
中 来 回 移 动 。 链 接应 当 灵 活 ， 例 如 第 一 页 不 应 有 “前 一 个 ”链接 ， 等 等 。 
口 包含 查询 框 ， 便 于 用 户 再 次 搜索 。 

口 不 要 显示 结果 页 的 URL， 除 非 访 问 者 都 很 懂 技 术 ， 能 理解 URL 中 的 含义 。 
口 为 每 一 个 结果 提供 易于 理解 的 页 面 名 称 和 描述 。 

口 页 面 名 称 应 当 是 可 以 点 击 的 链接 ， 指 向 具体 结果 。 

D 允许 加 入 〈 适 合 于 用 户 和 内 容 的 ) 分 类 和 改良 工具 。 

O 标明 那些 非常 规 页 面 的 结果 (例如 PDF 文件 ) 


Chiara 的 清单 的 确 是 一 个 很 好 的 开始 ， 似 乎 各 项 的 难度 也 不 过 尔 尔 。 但 是 ， 
设计 一 个 好 的 搜索 框架 比 单独 的 结果 页 面 要 复杂 得 多 。 当 你 把 框架 应 用 到 自己 
的 网 站 中 时 ， 要 考虑 的 方面 也 绝 不 是 看 上 去 那么 简单 。 而 这 正 是 本 章 讲述 的 主 
要 内 容 。 


对 于 搜索 来 说 ， 真 正 的 挑战 在 于 要 理解 人 们 为 什么 搜索 ， 以 及 他 们 会 怎样 
使 用 这 些 结果 ， 同 时 还 要 了 解 应 该 显示 何 种 类 型 的 结果 、 其 中 又 应 该 包含 哪些 
具体 信息 。 此 外 我 们 还 得 应 对 各 种 可 能 的 搜索 结果 "。 再 次 强调 ， 框 架 体系 内 的 
各 种 元 素 必须 放 在 具体 的 上 下 文 情 境 中 去 思考 ， 否 则 将 毫 无 意义 。 


4.1 描述 


通过 固定 的 任务 流程 ， 搜 索 框架 让 用 户 能 够 定位 具体 的 内 容 ， 而 不 必 按 图 
索 怠 地 在 网 站 各 层级 间 来 回 穿 梭 。 借 助 直接 搜索 ， 用 户 通 常 能 够 绕 开 探 索 过 程 : 
他 们 不 必 在 各 个 分 类 页 和 陈列 页 中 反复 查看 ， 就 能 够 找 出 一 系列 与 具体 查询 相 
关联 的 内 容 链接 ， 从 而 直接 点 击 进 入 内 容 页 。 无 需 经 过 网 站 的 层 层 导航 ， 也 不 
会 有 决定 失误 的 风险 。 


© 例如 ， 没 有 任何 搜索 结果 。 
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当然 ， 只 有 在 最 完美 的 情况 下 ， 还 得 有 一 个 最 完美 的 用 户 ， 搜 索 才 会 真 的 
这 么 简单 。 现 实 中 的 搜索 会 带 来 一 系列 自身 的 问题 ， 如 果 你 要 在 设计 中 应 用 搜 
索 框 架 ， 这 些 问 题 都 必须 经 过 慎重 的 考虑 。 而 要 想 正确 地 理解 这 些 问 题 ， 首 先 
必须 理解 搜索 之 所 以 如 此 必要 的 心理 学 因素 。 


42 上下文 情境 


Web 设计 师 常 说 他 们 花费 了 大 量 原 本 有 限 的 时 间 和 资源 用 以 改进 站 内 的 
搜索 引擎 ， 因 为 他 们 相信 ， 总 有 些 人 只 依赖 搜索 引擎 来 寻找 目标 内 容 。 他 们 
的 这 种 假设 有 一 个 强力 的 支撑 ， 即 Jakob Nielsen 的 Designing Web Usability ^ 
(New Riders 出 版 社 ) 一 书 ， 其 中 声称 人 们 在 首次 访问 某 个 网 站 并 寻找 内 容 时 ， 
有 一 半 以 上 的 用 户 都 会 直接 前 往 搜 索引 擎 ， 以 此 证 明了 “搜索 优先 ”(search- 
dominant) 的 趋势 。 


如 果 这 是 真 的 ， 设 计 师 们 就 有 得 已 了 。 既 要 支持 喜欢 使 用 搜索 引擎 的 访问 
者 ， 又 要 文 持 喜 欢 使 用 链接 的 访问 者 ， 设 计 和 制作 出 这 样 的 网 站 无 疑 是 一 个 极 
大 的 挑战 。 资 源 有 限 的 设计 团队 会 发 现 他 们 不 得 不 为 了 同一 个 内 容 提供 两 种 不 
同 的 途径 。 而 在 动 辑 数 千 页 内 容 的 网 站 中 ， 维 持 相互 独立 的 两 种 定位 工具 无 疑 
也 是 一 项 极为 艰巨 的 任务 。 


2001 4E, UIE 针对 电子 商务 网 站 进行 了 一 次 研究 ， 以 验证 用 户 “ 搜 索 优 
先 ” 的 理论 。 


在 该 项 研究 中 ，30 位 用 户 执行 了 121 项 不 同 的 购物 任务 。 每 一 位 用 户 都 访 
问 了 3~6 个 网 站 ， 购 买 他 们 感 兴 趣 的 物品 。 没 有 任何 两 位 用 户 对 同一 件 产 品 感 
兴趣 。 


如 果 搜 索 优先 理论 是 正确 的 ， 那 么 这 30 位 用 户 中 的 一 部 分 人 就 应 该 一 直 依 
束 于 搜索 引擎 来 寻找 产品 信息 ， 而 其 他 人 则 依靠 链接 。 如 果 其 中 某 些 用 户 没 有 
一 直 坚 持 使 用 搜索 引擎 ， 那 么 搜索 优先 的 理论 就 有 问题 。 


从 网 站 方面 来 看 也 同样 如 此 。 如 果 该 理论 是 正确 的 ， 二 者 各 自 的 拥护 者 就 
应 该 在 所 有 网 站 上 都 坚持 自己 的 行为 习惯 ， 而 不 会 出 现 某 个 网 站 的 所 有 用 户 都 


O Jakob Nielsen 是 用 户 体验 方面 的 业界 权威 ，Nielsen Norman Group 的 主要 负责 人 之 一 ， 被 淮 
为 Web 可 用 性 方面 的 世界 顶尖 专家 ， 著 作 很 多 。 网 站 是 http://www.useit.como 

® Designing Web Usability (Kikit Web 可 用 性 》) 一 书 于 1999 年 12 月 出 版 。2006 年 Nielsen 
又 出 版 了 Prioritizing Web Usability 《网 站 优化 :通过 提高 Web 可 用 性 构建 用 户 满意 的 网 
站 》)， 作 为 该 书 的 重要 更 新 和 延续 。 
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采用 同一 种 产品 定位 策略 的 情况 。 


为 了 说 明 这 一 点 ， 不 妨 想 想 你 所 居住 的 城镇 。 有 些 居民 是 右 撤 子 ， 有 些 则 
是 左 撤 子 。 周 末 晚 上 在 城 里 的 任何 一 家 餐厅 里 你 都 会 找到 这 两 类 人 。 而 不 管 在 
哪个 周末， 要 想 找 到 一 家 只 有 右 撤 子 出 现 的 餐厅 几乎 是 不 可 能 的 。UIE 对 这 些 
网 站 也 有 同样 的 假设 : 在 给 定 的 一 系列 测试 中 ， 一 个 网 站 不 可 能 只 有 搜索 优先 
的 用 户 访问 。 其 中 一 些 用 户 肯 定 会 更 倾向 于 使 用 链接 。 


研究 得 到 的 数据 显示 ，30 位 用 户 全 部 都 没有 在 寻找 产品 信息 时 首先 使 用 搜 
索引 敬 。 尽 管用 户 们 经 常 表示 自己 更 偏好 搜索 ， 但 研究 中 没有 一 位 用 户 是 真正 
的 搜索 优先 者 。 不 过 倒是 有 不 少 链接 优先 的 用 户 。 事 实 上 ， 大 概 有 20% 的 参与 
者 会 一 直选 择 链 接 。 


而 更 奇怪 的 是 ， 在 53% 的 被 测试 网 站 中 ， 所 有 的 用 户 都 采用 了 同一 种 产 
品 定位 策略 一 一 每 一 位 访问 者 寻找 目标 的 方法 都 和 其 他 人 别 无 二 致 。 在 21% 的 
网 站 中 ， 每 一 位 访问 者 都 只 使 用 搜索 ， 而 在 32% 的 网 站 中 ， 用 户 只 使 用 网 站 链 
接 。( 余 下 的 47% 则 是 二 者 相 混 ， 用 户 既 使 用 了 搜索 也 使 用 了 链接 。) 


这 表示 ， 导 致 用 户 选择 搜索 引擎 或 链接 的 真正 原因 其 实 存在 于 网 站 的 设计 
中 ， 它 与 每 个 用 户 自身 的 偏好 无 关 。 


换 名 话说， 似乎 有 某 些 网 站 才 是 搜索 优先 的 ， 而 不 是 用 户 。 


数据 同时 还 显示 ， 网 站 所 销售 的 产品 类 型 也 是 能 够 预测 用 户 最 初 使 用 搜索 
还 是 链接 的 因素 之 一 。 某 些 类 型 的 产品 天 生 就 更 适合 于 搜索 。 比 如 ， 用 户 通常 
都 依靠 搜索 来 寻找 某 本 书 或 某 张 CD 后 文 将 对 此 进行 深入 讨论 )， 而 在 找 服装 
类 产品 时 则 倾向 于 通过 链接 。 在 决定 一 个 网 站 是 搜索 优先 还 是 链接 优先 时 ， 网 
站 内 容 自 身 的 性 质 似 乎 在 其 中 扮演 了 重要 的 角色 。 


如 果 页 面 中 的 链接 在 某 些 方面 无 法 令 人 满意 ， 用 户 通常 也 会 转 而 使 用 搜索 
引擎 。 他 们 似乎 把 搜索 引擎 视 作 嗅 味 〈 感 知 是 否 挑选 了 正确 的 路 径 来 查找 信息 ) 
失败 时 的 后 备 计 划 。UIE 获得 了 支 持 这 一 行为 的 更 多 证 据 ， 研 究 员 们 观察 到 许 
多 首页 上 的 链接 失误 ， 它 们 都 迫使 用 户 转 而 依赖 于 搜索 引擎。 


或 者 换 一 种 说 法 : 记得 我 们 在 目录 框架 里 曾经 定义 过 ， 目 标 选 择 过 程 中 的 
第 一 步 就 是 筛 除 。 那 么 用 户 什么 时 候 会 使 用 搜索 呢 ? 要 么 就 是 在 目录 导航 无 法 
帮助 他 们 进行 筛 除 时 ， 要 么 就 是 在 他 们 发 现 只 用 名 字 就 能 轻松 地 搜索 到 产品 时 。 


用 户 搜索 优先 的 理论 并 无 多 少 证 据 支 持 ， 这 说 明 设计 团队 或 许 应 该 考虑 把 
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精力 集中 在 单一 的 内 容 定 位 方法 上 。 根 据 网 站 中 具体 内 容 的 不 同 ， 设 计 团队 要 
么 致力 于 搜索 引擎 ， 要 么 致力 于 链接 ， 没 有 必要 二 者 兼顾 。UJIE 的 测试 建议 ， 
聚焦 于 单一 方法 将 会 极 大 程度 地 改善 用 户 体验 。 


不 管 怎样 ， 我 们 已 经 清楚 ， 人 们 并 不 是 因为 自己 的 偏好 才 去 使 用 搜索 ， 也 
不 是 因为 它 更 快 ， 或 者 必须 要 使 用 它 。 人 们 使 用 搜索 是 因为 网 站 缺少 用 户 可 能 
正在 寻找 的 触发 词 ， 或 者 其 他 一 些 设计 上 的 原因 。 触 发 词 是 指 那些 在 用 户 看 来 
与 他 们 所 寻找 的 东西 相 吻 合 的 词汇 一 一 例如 ， 当 某 位 用 户 正在 寻找 有 关 午 餐 特 
价 的 信息 时 ， 一 个 Lunch Specials 午餐 特价 ) 的 链接 就 是 最 好 的 触发 词 。 


最 明显 、 最 简单 的 说 法 :人们 使 用 搜索 系统 的 首要 原因 就 是 为 了 捏 转 不 利 
的 局 面 一 一 不 利 指 的 正 是 无 法 通过 网 站 导航 找到 内 容 。 


4.3 任务 流程 


也 许 只 有 当 太 阳 系 中 的 行星 都 排列 在 正确 的 位 置 时 ， 搜 索 的 任务 流程 才 会 
真 的 如 此 简单 : 用 户 在 输入 栏 中 键入 一 个 搜索 词 ， 点 击 旁 边 的 按钮 〈 通 常 都 标 
记 为 Search)， 然 后 被 带 到 一 个 结果 页 面 ， 里 面 列 出 了 所 有 可 能 吻合 的 结果 。 第 
一 个 结果 链接 顺理成章 地 包含 了 他 所 要 寻找 的 内 容 ， 点 击 后 用 户 被 带 到 该 条 卓 
的 内 容 页 。 


而 事实 是 怎样 的 呢 ? 在 文章 “The Power of Defaults” Chttp://www.useit.com/ 
alertbox/defaults.html) "P, Jakob Nielsen 描述 了 康 奈 尔 大 学 ”于 2005 年 进行 的 
一 次 研究 。 其 中 ， 有 42% 的 用 户 都 在 第 一 时 间 点 击 了 排名 最 高 的 搜索 结果 ， 不 
管 它 是 不 是 最 佳 选择 。 而 另 有 8% 选择 了 第 二 条 结果 。 即 使 研究 员 把 排名 最 靠 
前 的 两 条 结果 互 换 了 位 置 ， 也 仍然 有 34% 的 用 户 选择 了 第 一 条 结果 。 简 而 言 
之 ， 用 户 非 常 相信 搜索 引擎 会 一 直 把 正确 的 结果 放 在 第 一 位 。 


那么 如 果 它 不 是 ， 将 会 发 生 什么 呢 ? 用 户 会 点 击 Back 按钮 ， 浏 览 其 余 的 搜 
索 结果 ， 在 好 几 页 中 来 回 碍 找 ， 最 后 做 出 一 个 更 为 合适 的 第 二 选择 吗 ? 不 太 可 能 。 


更 可 能 发 生 的 是 ， 用 户 修改 他 的 搜索 词 ， 然 后 进行 新 一 轮 搜 索 ， 而 不 是 在 
十 几 页 结果 中 来 回 查 找 〈 甚 至 都 很 难 超过 一 页 )。 只 有 很 小 的 百分比 的 用 户 会 
继续 查看 第 二 页 结果 ， 其 他 的 大 部 分 用 户 ， 在 大 部 分 时 间 里 ， 都 会 选择 修改 搜 
索 词 。 


O 康 奈 尔 大 学 成 立 于 1865 年 ， 是 著名 的 常春 藤 盟 校 成 员 ， 在 全 世界 范围 内 享有 极 高 的 学 术 声 
誉 ， 其 大 学 排名 始终 保持 在 全 球 前 15 名 之 内 。 网 址 为 http:/www.cornell.edu。 


图 4-1 
Cancer.gov? B 
速 搜索 体现 了 这 
一 设计 模式 最 为 


普遍 的 样 


x 


第 4 章 搜索 框架 


很 明显 ， 这 个 简单 的 三 步 任 务 流程 (输入 搜索 词 、 查 看 结果 、 点 击 ) 绝 不 
像 它们 看 上 去 那么 可 靠 。 我 们 会 在 本 章 的 余下 内 容 中 继续 讨论 。 
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搜索 框架 的 构成 元 素 不 多 ， 但 作用 都 很 强大 。 对 于 那些 因为 网 站 导航 无 法 
胜任 而 需要 另辟蹊径 的 用 户 ， 它 们 能 在 搜索 过 程 中 提供 从 头 到 尾 的 协助 。 


搜索 框架 下 包含 了 多 个 设计 模式 ， 包 括 快速 搜索 、 搜 索 结 果 、 高 级 搜索 、 
过 滤器 和 分 页 模式 等 。 不 过 与 大 多 数 模式 不 同 ， 这 些 模式 根据 用 户 的 目的 以 及 
所 应 对 的 解决 方案 的 范围 大 小 ， 还 可 以 进一步 被 细 分 为 多 个 类 型 。 


4.4.1 快速 搜索 


快速 搜索 (Quick Search) 通常 只 有 一 个 简单 的 输入 栏 以 及 相 邻 的 按钮 ， 用 
于 提交 查询 ， 如 图 4-1 所 示 。 它 通常 被 放置 在 页 面 中 最 容易 找到 的 地 方 。 不 过 
它 有 时 候 也 会 变 得 比较 复杂 ， 我 们 在 设计 时 需要 考虑 不 少 因素 。 


l Al K b A | - . In English | En español 
AA National Cancer Institute 
| TITUTI U.S. National Institutes of Health | www.cancer.gov ha SEARCH 


NS 


最 为 重要 的 一 条 是 首先 要 理解 用 户 为 什么 会 使 用 快速 搜索 : 只 有 理解 了 它 ， 
才能 为 我 们 后 续 的 一 切 有 关 搜 索 的 设计 决定 打下 基础 。 我 们 已 经 讨论 过 ， 用 户 
并 不 是 因为 他 们 偏好 搜索 优先 才 依 赖 搜 索 ， 而 是 因为 有 些 内 容 确实 适合 这 种 方 
式 ， 或 者 是 因为 该 网 站 缺少 符合 用 户 的 触发 词 。 为 了 说 明 这 一 点 ， 我 们 可 以 考 
虑 一 下 类 似 Amazon.com 和 Cancer.gov 这 样 的 网 站 之 间 的 不 同 。 


亚马逊 的 站 内 搜索 能 力 在 互联 网 中 数一数二 。 但 令 人 吃惊 的 是 ， 亚 马 逊 的 
搜索 如 此 有 效 的 原因 却 很 可 能 是 你 的 网 站 搜索 效率 不 高 的 原因 。 


在 亚马逊 上 ， 书 籍 、CD、DVD 和 录影 带 的 大 量 储备 构成 了 我 们 称 为 唯一 
标识 Cuniquely-identified) 的 内 容 。 用 户 只 需 在 搜索 栏 中 输入 一 些 〈 通 常 他们 
都 已 知 的 ) 特定 信息 ， 就 能 很 轻松 地 搜索 到 这 些 内 容 。 换 句 话 说， 人 们 通过 书 
名 和 作者 来 标识 书籍 ， 通 过 艺术 家 、 唱 片 名 和 歌曲 名 来 标识 CD。 购 物 者 们 每 
次 在 亚马逊 上 寻找 某 本 书 或 者 某 张 CD 的 时 候 ， 他 们 通常 都 会 在 搜索 栏 里 输入 
其 中 的 一 个 标识 符 。 


O Cancer.gov 是 美国 国家 癌症 协会 “National Cancer Institute) 的 官方 网 站 。 
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比如 在 UIE 的 研究 中 ， 有 一 位 购书 者 在 搜索 栏 输入 了 Sum of All Fears ^, 
亚马逊 返回 了 Tom Clancy 所 著 小 说 的 7 个 不 同 版 本 。 网 站 并 没有 建议 其 他 书 名 
中 包含 sum 或 者 fear 的 书籍 一 一 只 是 这 一 本 书 的 7 个 版 本 。 


如 果 用 户 搜索 的 是 唯一 标识 内 容 ， 而 且 他 们 知道 标识 符 是 什么 ， 那 么 搜索 
将 会 非常 精确 。 在 UIE 一 次 针对 35 位 在 线 购物 者 的 研究 中 ， 有 99% 的 搜索 返 
回 了 有 用 的 结果 (购买 CD 和 录影 带 )。 


不 过 ， 对 于 唯一 标识 内 容 的 搜索 应 当 算是 常规 之 外 的 一 种 特例 。 在 大 多 数 
情况 下 ， 用 户 并 不 知道 自己 要 找 的 内 容 的 名 称 。 让 我 们 看 看 在 以 下 4 个 站 点 中 
最 有 可 能 的 用 户 行为 。 


Q Amazon.com 中 大 部 分 都 是 唯一 标识 内 容 ， 用 户 基本 上 都 知道 产品 的 名 
称 或 者 其 他 的 合理 称呼 ， 也 正 因 此 他 们 才 会 用 这 些 词汇 进行 搜索 。 

A BestBuy.com 中 大 部 分 都 是 唯一 标识 内 容 ， 但 由 于 电子 产品 通常 都 带 有 
含义 不 明 的 数字 型 号 ， 用 户 不 太 可 能 会 知道 它们 的 确切 名 称 〔 例 如 三 著 
WD-65735)， 因 此 更 偏向 于 通过 产品 类 别 或 类 型 来 搜索 (例如 高 清 电 
视 )。 

O Gap.com 中 有 一 些 是 唯一 标识 内 容 ， 但 由 于 服装 饰品 的 名 称 通常 都 并 不 
确定 ， 用 户 更 偏向 于 通过 产品 类 别 或 类 型 来 搜索 ， 偶 尔 也 有 例外 。 

O Cancer.gov 中 大 部 分 都 是 非 唯一 标识 内 容 ， 而 且 因为 很 少 有 用 户 能 知道 
站 点 内 各 文章 的 标题 ， 所 以 他 们 更 可 能 会 搜索 自己 感 兴趣 的 主题 范围 ， 
而 不 是 某 段 内 容 的 具体 名 称 。 


在 亚马逊 的 网 站 里 ， 我 们 可 以 通过 标题 、 作 者 或 者 其 他 各 种 各 样 的 标识 符 
KER ORF | WF) 但 这 完全 是 因为 与 哈 利 。 波 特 相 关 的 这 些 产品 拥有 自 
己 的 标识 符 。 在 UE 的 研究 中 发 现 ， 对 于 像 玩具 、 服 装 、 宠 物 用 品 这 样 的 非 唯 
一 标识 内 容 ， 只 有 大 约 31% 的 搜索 会 成 功 。 大 部 分 网 络 内 容 都 缺乏 这 种 容易 
记忆 的 标识 符 ， 导 致 很 难产 生 合适 的 搜索 结果 。 实 际 上 ， 这 一 点 也 开始 让 亚 马 
逊 陷入 了 麻烦 。 除 了 书籍 之 外 ， 网 站 也 提供 电子 产品 (以 及 其 他 极为 多 样 化 的 
产品 )。 在 UE 的 研究 里 ， 用 户 搜索 DVD 机 时 输入 了 哪些 词汇 呢 ? 他 们 没有 输 
入 产品 的 确切 名 称 Panasonic DVD-RV31K DVD Player (Black)， 其 至 连 生 产 商 
Panasonic (PSP) 都 没有 输入 。 当 用 户 寻 找 DVD 机 时 ， 他 们 输入 的 就 是 DVD 
player (DVD 机)。 


O Sum of All Fears (RUEDA) 是 美国 畅销 小 说 作家 Tom Clancy 于 1991 年 出 版 的 惊悚 小 
hh, DARE MIF ESE MEHR ES. RSET T I FEAL. 
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这 就 是 非 唯 一 标识 内 容 的 一 般 情况 。 一 位 想 买 牛 仔 靳 的 用 户 输 入 的 是 boots 
(靴子 )。 另 一 位 想 买 彩色 铅笔 的 用 户 输入 的 则 是 craft supplies FTH m). 4 
买 珍珠 耳环 的 用 户 输入 的 不 是 earrings (耳环 )， 而 是 含义 非常 宽泛 的 jewelry 
(珠宝 )。 


虽然 有 一 些 非 电子 商务 的 网 站 也 有 了 唯一 标识 的 内 容 ， 但 它们 数量 非常 稀少 。 
比如 ， 美 国 专利 商标 局 (PTO) “让 用 户 能 够 通过 商标 名 称 、 持 有 人 以 及 代理 人 
等 属性 来 查找 商标 。 在 代理 人 一 项 中 搜索 James Spool， 你 就 能 看 到 Jared 的 父 
亲 的 一 些 成 果 。 不 过 ，PTO 只 能 算是 一 个 特例 ， 而 不 是 常规 。 你 网 站 上 的 大 部 
分 内 容 都 极 有 可 能 被 划分 为 非 唯 一 标识 内 容 这 一 范畴 。 


而 即使 是 那些 全 部 都 是 唯一 标识 内 容 的 网 站 ， 如 果 用 户 没 有 通过 标识 符 来 
搜索 ， 那 么 也 可 能 会 出 现 例外 。 比 如 ， 一 位 每 天 早上 都 用 收音 机 收听 Celtic 音 
乐 的 用 户 希 望 能 购买 一 张 介绍 性 的 CD， 他 在 亚马逊 的 搜索 栏 中 输入 celtic CL 
尔 特 ) 后 得 到 了 889 个 结果 ， 但 却 无 法 分 辨 其 中 哪 一 张 CD 才 是 他 想 要 的 介绍 
性 的 作品 ， 如 图 4-2 所 示 。 


图 4-2 
非 唯一 标识 内 容 Results for: brain cancer 
A ot 
o Best Bets for Brain Tumor | 
y rto 48 SCH Az TS 


Brain Tumor Home Page 
NCI's gateway for information about brain tumors. 


Results 1-10 of 3611 for: brain cancer | 


National Cancer Institute Brain Tumor Study in Adults: Fact Sheet 

In 1994, researchers at the National Cancer Institute initiated a comprehensive study on the causes of 
brain tumors in adults. National Cancer Institute Fact Sheet 3.88 
http:/Wwww.cancer.gov/cancertopics/factsheet/risk/brain-tumor-study 


Cancer of the Brain - SEER Survival Monograph 

National Cancer Institute 203 SEER Survival Monograph INTRODUCTION This study provides survival 
analysis for 19,774 histo-logically confirmed 

http://seer.cancer.gov/publications/survival/surv_brain.pdf 


New Malignancies Following Cancer of the Brain and Central Nervous System 

Synopsis The incidence of multiple primary cancers was evalu-ated in a cohort of 31,336 persons 
diagnosed with a first primary cancer of the brain and central nervous system (CNS) during 1973-2000 
and followed for an average of 3.4 years. 

http://seer.cancer.gov/publications/mpmono/Ch14_Brain.pdf 


Brain and Other CNS Cancer - Middle East Cancer Consortium (MECC) Cancer Incidence 
MECC Monograph 111 Brain and Other Central Nervous 
http://'seer.cancer.gov/publications/meccimecc_brain.paf 


National Institutes of Health to Map Genomic Changes of Lung, Brain, and Ovarian Cancers 

The National Cancer Institute and the National Human Genome Research Institute today announced the 
first three cancers that will be studied in the pilot phase of The Cancer Genome Atlas (TCGA) project. 
The cancers to be studied include lung, brain (glioblastoma), and ovarian. 
http:/Wwww.cancer.gov/newscenter/pressreleases/TCGAcancertypes 


O 全 称 是 The United States Patent and Trademark Office. 
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换 句 话 说， 尽管 设计 师 们 经 常 追 随 亚 马 逊 的 脚步 ， 但 在 上 述 网 站 中 ， 也 许 
你 最 应 该 广 意 的 是 适应 范围 更 广 的 Cancergov。 


当 尝 试 定位 非 唯一 标识 内 容 的 时 候 ， 网 站 导航 (例如 分 类 链接 ) 是 最 好 的 
途径 。 在 Cancergov 上 ， 如 果 用 户 要 搜索 某 篇 脑 癌 的 文章 ， 使 用 网 站 导航 会 比 
搜索 更 容易 得 到 满意 的 结果 。 用 户 不 大 可 能 在 第 一 次 访问 时 就 知道 这 篇 文章 的 
名 字 或 者 作者 ( 恺 怕 第 10 次 也 一 样 )， 因 此 只 能 通过 逐个 页 面 、 逐 次 点 击 来 定 
位 内 容 。 而 这 并 不 是 一 件 坏事 。UIE 的 研究 显示 ， 与 普遍 认同 的 观点 相反 ， 只 
要 用 户 相信 自己 的 每 一 次 点 击 都 能 向 目标 逐步 靠近 ， 他 们 并 不 在 意 多 点 几 次 。 
同时 ， 增 加 用 户 浏览 的 页 面 数量 意味 着 网 站 向 他 们 展示 了 更 多 的 内 容 ， 其 中 也 
包括 广告 ， 这 无 疑 创 造 了 商业 机 会 。 


当然 ， 这 种 方法 可 行 的 前 提 是 网 站 能 够 提供 正确 的 触发 词 。 当 用 户 找 不 到 
自己 的 触发 词 时 《这 是 由 于 网 站 导航 的 失职 )， 他 们 才 会 使 用 搜索 功能 。 换 句 话 
说 ， 当 人 们 使 用 搜索 系统 时 ， 他 们 实际 上 是 试图 寻找 到 通 往 内 容 的 方法 ， 因 为 
无 法 用 别 的 方法 找到 。 他 们 是 在 努力 创造 本 不 存在 的 链接 。 


[如 果 想 深入 理解 触发 词 以 及 它们 如 何 影 响 用 户 定 位 内 容 的 能 力 ， 可 以 付费 
阅览 Jared 的 报告 Designing for the Scent of Information (为 信息 的 气味 而 设计 )。 


网 址 是 http:/www.uie.comy/reports/scent of information. ] 
当 同 时 满足 以 下 3 个 条 件 时 ， 就 能 放心 地 依赖 网 站 内 的 搜索 系统 : 


O 你 的 内 容 是 唯一 标识 的 ; 
O 你 的 用 户 很 熟悉 那些 标识 符 ; 
O 你 的 用 户 希 望 利 用 那些 标识 符 作 为 定位 内 容 的 方法 。 


要 想 确定 你 是 否 满足 这 些 条 件 ， 只 需 看 看 搜索 日 志 记 录 。 如 果 你 发 现 有 一 
大 堆 分 类 名 称 ， 例 如 jewelry GRE) 或 者 men’s pants〈 男 裤 )， 而 不 是 具体 内 
容 的 引用 ， 那 么 网 站 的 内 容 就 是 非 唯一 标识 的 。 如 果 你 无 法 满足 上 述 条 件 ， 可 
能 就 需要 为 用 户 开辟 另 一 种 导航 方法 。 

除了 以 上 有 关 搜 索 的 战略 性 观察 之 外 ， 还 有 许多 低层 次 的 细节 需要 考虑 ， 
例如 搜索 栏 在 网 页 中 的 位 置 、 它 在 网 站 中 的 稳定 性 、 搜 索 框 的 标签 、 按 钮 的 标 
签 ， 以 及 是 否 提供 分 类 下 拉 菜 单 或 者 自动 提示 等 功能 。 不 过 ， 我 们 将 把 这 些 细 
节 留 给 模式 资源 库 的 筹备 者 去 考虑 。 我 们 的 目的 并 不 是 在 本 书 中 描述 这 些 模式 ， 
而 是 帮助 大 家 理解 为 什么 在 框架 中 包含 它们 ， 以 及 它们 是 如 何在 搜索 过 程 中 影 
响 用 户 体验 的 。 


图 4-3 
Gap.com 的 搜索 
陈列 页 就 是 搜索 
结果 页 面 的 第 一 
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442 ”搜索 结果 
任何 一 次 搜索 都 可 能 会 产生 2 种 类 型 的 搜索 结果 页 ， 以 及 4 种 结果 。 


第 一 种 结果 页 面 就 是 搜索 陈列 页 (Search Gallery)， 这 可 能 也 是 你 最 为 熟悉 
的 类 型 ， 如 图 4-3 所 示 。 它 就 是 一 个 陈列 页 ， 和 我 们 在 第 3 ben 仓 的 目录 框架 
类 似 。 唯 一 显著 的 不 同 就 是 搜索 陈列 页 上 显示 的 结果 完全 是 根据 用 户 的 搜索 指 
令 而 动态 创建 的 。 


Search Results 
Looking for "jeans"? We came up with 157 choices. 
see 20 | see 100 123.8»» 
Sparkle back pocket Demi panel brown 922.80 flare leg jeans Light-wash flare leg 
stralght leg jeans S jeans jeans 
$5656 ppt in petite/tall $59.50 
$12. 99 $34.99 available in petite/tall 


Navy wide leg jeans Faded flare leg jeans Boyfriend jeans Garment dye straight 
$59. 59.50 $59.50 jeans 


available in petite/tall 


$69.99 
换 句 话说 ， 搜 索 陈 列 页 就 是 最 直接 的 结果 页 面 。 就 是 你 每 次 搜索 时 希望 看 
到 的 页 面 ， 也 就 是 Google 所 用 的 页 面 。 


需要 说 明 的 是 很 多 搜索 陈列 页 都 面临 着 和 标准 陈列 页 一 样 的 问题 ， 在 绝 大 
多 数 情 况 下 ， 并 不 会 针对 特定 的 条 目 采 用 最 为 有 效 的 设计 模式 ， 所 有 条 目 其 实 
都 受到 同样 的 对 待 。 对 于 Bestbuy.com 上 的 很 多 产品 〈 例 如 耳机 )， 图 片 很 有 
效 ， 那 么 Best Buy 会 为 所 有 商品 使 用 图 片 ， 包 括 数码 单反 相机 ， 而 实际 上 这 种 
商品 的 图 片 几乎 一 点 用 处 都 没有 。 
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不 论 怎样 ， 搜 索 陈 列 页 都 是 结果 页 中 最 为 常见 的 类 型 。 实 际 上 ， 我 们 见 到 
的 每 一 种 搜索 引擎 都 会 用 这 种 形式 来 发 布 结果 ， 而 其 中 一 些 同时 还 会 提供 第 二 
种 类 型 的 结果 页 : 搜索 部 门 (search department) 页 。 


搜索 部 门 页 也 会 列 出 一 系列 结果 ， 不 过 更 类 似 于 目录 框架 里 的 分 类 页 。 其 
外 观 和 其 他 分 类 页 可 能 会 有 些 不 同 ， 但 二 者 的 范围 是 一 样 的 。 它 显示 通 往 不 同 
陈列 页 的 链接 ， 并 在 显示 具体 的 陈列 页 之 前 鼓励 用 户 进一步 缩小 选择 范围 。 一 
般 来 说 ， 如 果 搜 索 结果 涉及 的 分 类 过 多 ， 设 计 师 们 就 会 使 用 这 种 技巧 ， 以 便 在 
搜索 陈列 页 中 更 好 地 组 织 这 些 结果 。 


比如 ， 某 位 购物 者 在 Bestbuy.com 上 搜索 Nintendo Wii (任天堂 Wii) °, 
对 于 网 站 设计 师 来 说 可 能 就 是 一 次 艰巨 的 挑战 。 这 位 用 户 是 想 买 Wii 游戏 主机 、 
游戏 软件 还 是 零 配 件 ? 是 想 买 Wii 的 品牌 服装 、 玩 具 还 是 其 他 什么 东西 ? 我 们 
无 法 猜测 用 户 的 意图 ， 而 要 想 把 这 一 大 堆 可 能 的 对 象 全 都 放 在 一 个 搜索 陈列 页 
里 ， 唯 一 的 办 法 就 是 将 它们 划 入 带 有 标签 的 不 同 区 域 。 当 然 ， 这 么 做 了 以 后 ， 
你 〈 实 质 上 ) 就 创建 了 一 个 分 类 页 ， 如 图 4-4 所 示 。 


图 4-4 
See all 510 results > BestBuy com 提 供 
eo i 了 一 个 搜索 部 门 
It's gaming for everyone. | Check out the system, cci md 
i ] games and more » 任天堂 Wi 游戏 
ma pa 3 系统 相关 的 产品 
VIDEO GAMES & TOYS all items » 
b. —— 7 GG Wii |, Nintendo Wii - ~ — | Mario Kart Wii 
th Wii Wheel 
] E SKU: i 8008559 lp - Starter Bundle - Mii = 
Weve He Ie B| Platform: Nintendo 
Que Price: $249.99. = wi 
WHR KK 


GIFT CENTER See all 1 items > 


— “| Mario Kart Wii 
mwa! with Wii Wheel 
Or. | Sku: 8791195 
5 ew Platform: Nintendo 
3 Wii 


Yo 


O 任天堂 公司 推出 的 Wii 是 第 7 代 家 用 游戏 机 ， 面 市 后 大 受 欢 迎 ， 一 直 供 不 应 求 。 官 方 网 站 
是 http://wii.como 
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44.3 搜索 产 出 


不 论 结果 页 面 的 类 型 如 何 ， 一 次 搜索 会 有 4 种 可 能 的 产 出 (outcome) 结 
果 。 

O 准确 适 配 或 非常 相关 。 用 户 看 到 的 结果 能 够 带 他 直接 前 往 所 找 的 内 容 。 
这 是 最 理想 的 情况 ， 因 为 用 户 和 内 容 之 间 的 距离 最 短 。 其 前 提 是 用 户 搜 
索 的 词汇 与 网 站 所 用 的 词汇 相 吻 合 ， 而 且 就 出 现在 寻找 的 内 容 之 中 。 

O 相关 条 目 。 搜 索 结 果 与 用 户 所 找 的 内 容 有 关 ， 但 不 是 非常 相关 。 如 果 网 
站 中 没有 用 户 要 找 的 内 容 ， 或 者 用 户 搜索 时 并 没有 选用 最 合适 的 词汇 ， 
就 可 能 会 发 生 这 种 情况 。 

O 不 相关 的 结果 。 搜 索 结 果 与 用 户 所 找 的 内 容 毫 无 关系 。 用 户 搜索 时 用 词 
不 当 自 然 会 出 现 这 种 情况 ， 不 过 如 果 搜 索 系 统 不 起 作用 ， 也 会 得 到 同 
样 的 结果 。 比 如 ， 搜 索 Men's Pyjamas ”( 男 式 睡衣 ) 返回 的 所 有 包含 
Men 〈 男 式 ) 的 结果 都 没什么 帮助 。 

O 没有 结果 。 搜 索 无 法 产生 任何 结果 。 如 果 用 户 搜索 时 使 用 的 关键 字 过 
多 ， 或 者 单词 拼写 错误 ， 都 可 能 会 发 生 这 种 情况 。 当 然 也 可 能 是 由 于 网 
站 里 确实 没有 匹配 的 结果 。 还 有 些 特别 死板 的 搜索 系统 ， 要 是 用 户 使 用 
了 自然 语言 而 不 是 具体 的 标签 ， 那 么 也 可 能 会 显示 “没有 结果 ”的 结 
页 。 如 果 网 站 里 的 确 没 有 相关 内 容 ， 那 么 没有 结果 也 并 不 是 一 件 坏事 ， 
但 如 果 这 些 内 容 就 在 那里 ， 只 是 用 户 没 找 到 ， 那 就 有 问题 。 


上 述 的 第 一 种 结果 无 疑 是 最 好 的 。 而 其 他 3 种 都 可 能 会 带 来 灾难 ， 因 为 事 
实证 明 ， 用 户 不 会 为 搜索 付出 很 多 努力 。 在 对 30 位 用 户 网 络 购物 的 搜索 模式 的 
研究 中 ，UIE 注意 到 用 户 在 搜索 失败 之 后 的 继续 尝试 。 结 果 非 常 有 趣 ， 有 47% 
的 用 户 只 继续 尝试 了 一 次 。 男 外 30% 的 用 户 尝 试 了 两 次 。 只 有 低 于 25% 的 用 
户 会 尝试 超过 两 次 ， 最 终 得 到 成 功 的 结果 。 


如 今 的 网 站 设计 师 们 为 了 让 用 户 能 继续 搜索 可 谓 不 遗 余力 。 他 们 会 加 入 一 
些 鼓励 性 的 搜索 建议 ， 例 如 请 尝试 使 用 不 同 的 关键 字 进 行 搜索 。 然 而 ， 没 有 证 
据 显示 这 些 建议 能 够 鼓励 用 户 再 次 搜索 。 他 们 多 半 会 认为 自己 第 一 次 《或 者 可 
能 第 二 次 ) 的 尝试 是 最 好 的 。 比 如 ，Bed Bath & Beyond “的 网 站 会 鼓励 一 个 搜 
索 和 窗帘 的 用 户 说 :“ 请 用 类 似 平底 锅 或 者 咖啡 这 样 的 常用 词汇 来 扩大 您 的 搜索 范 
围 ， 以 便 找 到 更 多 结果 。” 对 于 窗帘 来 说 ， 什 么 词汇 才 算 常用 呢 ? 这 表示 设计 师 
最 多 也 只 有 一 到 两 次 机 会 帮助 用 户 通过 搜索 来 找到 内 容 。 对 大 部 分 用 户 来 说 ， 

O Pyjamas 一 词 特 指 无 男女 性 别 之 分 的 睡衣 裤 ， 因 此 这 种 产品 的 名 称 中 一 般 者 不 会 带 有 Men 字样。 

O) Bed Bath $: Beyond 公司 成 立 于 1971 年 ， 总 部 位 于 美国 。 主 要 经 营 家 居 用 品 的 连锁 零售 业务 。 
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顺便 提 一 句 ， 这 种 情形 并 不 只 出 现在 电子 商务 网 站 中 。 多 年 来 ， 不 管 是 企 
业内 网 还 是 公司 和 机 构 的 信息 站 点 ， 或 者 其 他 各 类 网 站 ， 只 要 有 搜索 功能 就 可 
能 会 出 现 上 述 情形 。UIE 对 电子 商务 的 研究 数据 只 是 证 实 了 长 久 以 来 的 猜测 。 
而 UIE 正在 进行 的 研究 则 更 进一步 表明 ， 搜 索 必 须 做 到 完美 。 不 论 何 时 ， 用 户 
期 望 的 都 是 第 一 步 就 看 到 效果 。 然 而 大 多 数 搜索 系统 都 还 差 得 很 还 。 实 际 上 ， 
在 研究 中 用 户 搜索 的 次 数 越 多 ， 就 越 难 找到 想 要 的 内 容 。 单 次 搜索 时 ， 有 55% 
的 用 户 能 找到 内 容 ， 而 搜索 两 次 后 找到 内 容 的 用 户 却 降 到 了 38%。 超 过 两 次 的 
用 户 全 都 一 无 所 获 ， 再 怎么 狗 而 不 舍 〈 低 于 25% 的 用 户 ) 也 是 一 样 。 


最 能 激励 用 户 修 改 条 件 、 继 续 搜索 的 ， 是 当 他 们 看 到 “没有 结果 ”的 时 候 。 
不 过 大 部 分 用 户 看 到 这 个 页 面 就 放弃 了 ， 只 有 一 部 分 人 会 进行 二 次 尝试 。 


研究 中 的 情况 是 下 面 这 样 的 。 


O 第 一 次 搜索 尝试 之 后 ， 有 23% 的 用 户 收 到 了 “没有 结果 ”的 信息 。 

口 继续 尝试 的 用 户 中 有 44% 再 次 得 到 “没有 结果 ”的 信息 。 

O 如 果 他 们 继续 坚持 ， 有 55% 的 用 户 第 3 次 得 到 了 “没有 结果 ”的 信息 。 
口 继续 到 第 4 次 尝试 的 用 户 ，100% 得 到 “没有 结果 ”的 信息 。 


从 理论 上 来 说 ， 人 们 在 使 用 搜索 系统 的 过 程 中 应 该 会 表现 得 越 来 越 好 。 因 
为 每 一 次 连续 的 交互 都 是 一 个 机 会 ， 可 以 让 我 们 逐步 学 习 和 掌握 工具 的 特性 。 
不 过 在 UIE 的 研究 中 ， 用 户 并 没有 抓 住 机 会 。 一 开始 没有 成 功 的 用 户 ， 只 会 每 
DU P. 


鼓励 用 户 继 续 的 帮助 提示 其 实 并 没有 帮 上 忙 。 如 前 所 述 ， 很 多 网 站 都 在 
“没有 结果 ”的 页 面 上 给 出 建议 ， 试 图 鼓励 用 户 输入 不 同 的 搜索 词 。 遗 憾 的 是 ， 
这 些 建议 并 不 能 提高 用 户 搜索 成 功 的 几率 。 

一 个 明显 的 事实 是 ， 研 究 中 要 求 用 户 访 问 的 网 站 里 确实 包括 他 们 要 找 的 内 
容 ， 但 仍 有 1/5 的 用 户 在 第 一 次 尝试 时 就 “没有 结果 ”。 这 说 明 很 多 搜索 系统 在 
设计 上 出 现 了 一 些 根本 性 的 错误 。 

对 设计 师 来 说 ， 关 键 似 乎 在 于 让 用 户 在 第 一 次 尝试 时 就 能 得 到 相关 的 结果 。 
这 样 的 网 站 最 有 可 能 成 功 。 

444 ”高 级 搜索 
要 想 进 行 高 级 搜索 ， 最 常见 的 方式 莫 过 于 通过 一 个 高 级 搜索 (Advanced 
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Search) 链接 ， 就 在 快速 搜索 栏 的 旁边 。 但 可 能 这 并 不 是 我 们 最 常用 的 方式 。 
为 什么 会 这 样 ? 


首先 ， 传 统 形式 的 高 级 搜索 并 不 像 我 们 想象 的 那样 被 广泛 地 使 用 。 非 正式 
的 观察 资料 显示 ， 长 期 稳定 地 使 用 高 级 搜索 的 群体 非常 稀少 ， 而 在 此 群体 之 外 ， 
这 一 功能 基本 无 人 问津。 实际 上 ， 唯 一 真正 在 乎 高 级 搜索 的 也 许 只 有 图 书 管理 
员 ， 以 及 相似 类 型 的 人 。 图 书 管理 员 常 常 需要 为 顾客 寻找 特定 的 信息 ， 而 这 些 信 
息 一 般 都 鲜 为 人 知 ， 普 通 的 搜索 很 难 涉及 。 不 仅 是 寻找 不 常见 的 信息 ， 这 种 搜索 
可 能 还 涉及 寻找 特定 的 媒体 类 型 ， 或 者 某 个 具体 的 版 本 ， 同 时 还 要 检验 信息 的 
可 靠 性 。 高 级 搜索 能 够 出 色 地 完成 这 类 工作 。 不 过 在 通常 情况 下 ， 大 多 数 人 并 
不 需要 这 些 。 对 于 一 般 用 户 来 说 ， 在 多 数 时 间 里 ， 高 级 搜索 的 威力 都 过 于 强大 。 


但 还 有 第 二 种 类 型 的 高 级 搜索 ， 我 们 经 常会 用 到 ， 而 且 它 也 不 会 表现 得 特 
别 “ 高 级 ”， 我们 称 之 为 受 限 快速 搜索 (Qualified Quick Search). 


受 限 快速 搜索 是 快速 搜索 的 一 种 形式 ， 通 过 附加 标准 (关键 字 之 外 的 限定 
WD 从 而 让 搜索 更 高 效 。 在 旅游 网 站 上 进行 的 搜索 就 是 一 个 很 好 的 例子 。 


比如 ， 要 在 Southwest.com ”上 预定 航班 ， 用 户 需 要 先 选择 出 发 城市 、 到 
达 城 市 、 起 程 日 期 、 返 回 日 期 还 有 购 票 的 成 人 及 儿童 数量 。 汽 车 租赁 网 站 
Hertz.com ” 则 要 求 用 户 预先 选择 租赁 城市 、 提 车 和 归还 时 间 ， 以 及 想 要 的 汽车 
款式 。 而 要 在 Hilton.com” 上 预定 房间 ， 用 户 得 指定 他 们 将 要 停留 的 州 或 者 城 
市 、 入 住 日 期 、 退 房 日 期 、 需 要 的 客房 数量 ， 以 及 是 否 把 搜索 扩大 到 所 有 希 尔 
顿 酒店 或 者 更 广 的 地 理 区 域 ， 如 图 4-5 所 示 。 


要 想 提供 好 的 搜索 结果 ， 这 些 网 站 就 需要 知道 更 多 的 信息 ， 而 不 仅仅 是 
“安排 一 次 到 亚特兰大 的 旅行 ”这 么 简单 ， 如 图 4-6 所 示 。 如 果 没 有 准确 的 细 
节 ， 它 们 就 没 办 法 向 用 户 提交 有 意义 的 结 


Cancer.gov 则 对 上 述 形式 稍 加 改变 ， 同 时 也 是 为 了 满足 用 户 特 殊 的 需求 。 
寻找 临床 试验 (clinical) 信息 的 用 户 通常 都 不 知道 应 该 如 何 搜索 ， 所 以 网 站 的 
设计 师 专门 为 此 创建 了 一 个 页 面 ， 包 含 了 一 些 附加 的 搜索 限定 词 ， 以 便 用 户 能 
够 轻松 一 点 。 这 种 方法 和 高 级 搜索 之 间 有 什么 区 别 呢 ?坦白 说 ， 除 了 措辞 之 外 


O 西南 航空 (Southwest Airlines) 是 美国 载 客 量 第 一 的 航空 公司 ， 总 部 设 在 达拉斯 ， 以 票 价 低廉 
闻名 。 

O Hertz 公司 是 世界 上 最 大 的 汽车 租赁 品牌 ， 全 球 共 有 7500 家 营业 网 点 ， 美 国有 3500 家 。 

O AR (Hilton) 是 世界 上 最 大 的 连锁 酒店 之 一 ， 截 至 2008 年 ， 全 球 共 有 533 家 以 希尔顿 为 
名 的 酒店 。 
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Find a Hotel | Reward Stays | My Reservations 
By: City | Airport | Address 
City: Search Within: 
|40 +) (9 mi O km 
State/Province: Country: 
Select +| [USA 外 
Check-In: | Check-Out: 
‘pay 2) vont CO =| E 
k Flexible Travel Dates? 
Hilton Hotels | 
Guest Rooms E 
1 | More Search Options... 
Clinical Trials Cancer Topics 
Search for Clinical Trials What ls Cancer? 
What Is a Clinical Trial? Treatment 
Clinical Trial Results Prevention, Genetics, Causes 
Educational Materials Screening and Testing 
Lista Trial in NCI's PDQ& Coping with Cancer 
Smoking 
Cancer Health Disparities 
NCI Fact Sheets 
Physician Data Query (PDQ®) 


没有 任何 不 同 。 网 站 用 Search for Clinical Trials 链接 代替 了 Advanced Search $£ 
接 ， 仅 此 而 已 。 高 级 搜索 的 麻烦 之 处 在 于 ， 用 户 并 不 一 定 认 为 他 们 有 任何 高 级 
的 问题 ， 而 只 是 有 一 些 简单 的 问题 不 知 如 何 解决 。 仅 仅 变 换 一 下 标签 ， 就 能 改 
变 用 户 对 该 功能 的 认同 程度 。 


为 临床 试验 提供 专门 的 搜索 表单 ， 此 举 也 能 使 用 户 了 解 导 致 各 试验 不 同 的 
因素 。 试 验 的 状况 、 阶 段 、 治 疗 类 型 、ID 和 捐助 人 都 能 帮助 我 们 缩小 选择 范 
围 。 但 如 果 网 站 只 提供 一 个 快速 搜索 栏 ， 是 否 每 位 用 户 都 知道 该 输入 这 些 信息 
W? 绝 不 可 能 。 但 因为 有 了 这 种 专门 的 搜索 功能 ， 他 们 就 能 从 中 学 习 ， 并 在 日 
后 运用 这 些 知识 。 


亚马逊 和 其 他 许多 网 站 采取 的 则 是 更 为 简单 的 形式 。 由 于 常见 的 搜索 词 很 
可 能 会 得 到 多 个 种 类 的 结果 (例如 搜索 Nintendo Wii 会 得 到 电器 、 玩 具 、 服 装 
等 结果 )， 这 些 网 站 通常 会 在 快速 搜索 栏 旁 边 加 一 个 下 拉 菜 单 ， 以 此 要 求 用 户 为 
搜索 词 添加 具体 的 界定 标准 。 这 与 西南 航空 要 求 用 户 用 起 程 和 返回 日 期 来 界定 
搜索 是 一 样 的 道理 。 


这 也 是 高 级 搜索 的 一 种 形式 ， 因 为 它 在 关键 字 之 外 还 需要 其 他 限制 。 不 过 


图 4-6 
Cancer.gov 为 

EB 了 一 个 单 
的 搜索 选项 ， 
为 临床 试验 的 
索 而 设计 


NE Att SES “Tr 


Kayak 的 过 滤器 使 


图 4-7 


和 搜索 结果 
E 


司 样 的 


fa 


AUC, 


SSLA3 


ly 


,因此 
很 难 发 现 
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二 者 又 有 很 大 不 同 ， 因 为 这 些 标 准 通常 都 是 必需 的 《而 不 是 可 选 的 )， 而 且 并 不 
需要 很 多 标准 ， 不 像 高 级 搜索 常常 会 提供 一 大 堆 的 过 滤 选 项 。 它 更 为 简单 一 一 
只 是 请 用 户 事先 对 搜索 进行 一 些 限制 。 所 以 我 们 称 之 为 受 限 快速 搜索 。 


在 设计 站 内 搜索 系统 时 ， 一 定 要 考虑 清楚 是 否 添加 高 级 搜索 。 也 许 的 确 有 
一 部 分 用 户 偶尔 会 从 中 受益 ， 但 如 果 你 的 网 站 走 的 是 大 众 路 线 〈 也 就 是 说 你 的 
主要 用 户 并 不 是 图 书 管理 员 )， 也 许可 以 不 用 专门 构建 一 个 高 级 搜索 页 面 。 而 如 
果 你 需要 用 户 输入 的 具体 信息 才能 提供 有 意义 的 结果 ， 那 么 受 限 快速 搜索 也 许 
正 是 不 二 之 选 。 


445 ”过 滤器 
过 滤器 (filter) 是 另 一 种 形式 的 高 级 搜索 ， 不 过 主要 有 两 点 不 同 。 


首先 ， 过 滤器 通常 出 现在 最 初 的 搜索 执行 之 后 ， 目 的 是 为 了 帮助 用 户 缩减 
选择 数量 ， 同 时 增加 结果 的 准确 度 。 比 如 在 旅行 预订 网 站 Kayak.com ^ E Cl 
图 4-7 所 示 )， 当 一 位 用 户 指 定 了 最 初 的 搜索 限制 〈 例 如 旅行 日 期 和 目的 地 ) 之 
Ja» Kayak 在 搜索 结果 页 面 上 提供 了 一 个 边栏 ， 里 面 的 选项 能 够 进一步 缩小 选 


$ 63 Northwest / PHX 6:50a > LGA 4:57p 1(7h 07m) 
Best 2 
y Stops w United LGA 6:00p 5 PHX 10:45p 1(7h 45m) 
MÍ nonstop $279 
M1 stop $260| | Orbitz.com details email favorite 
O 2+ stops 
$270 ye Northwest / PHX 10:30p LGA 7:59a 1(6h 29m) 
» Flight Times United LGA 6:00p > PHX 10:45p 1(7h 45m) 
Depart takeoff [landing Orbitz.com details email favorite > 
Tue 5:36a - Wed 12:00a show all 
"kai $270 Y Delta / PHX 10:30p } LGA 7:59a 1(6h 29m) 
select United LGA 6:00p > PHX 10:45p l(7h 45m) 
Return {takeoff [landing 
Tue 5:30a - 8:30p show all 2 sites details email favorite > 
takeoff 
$270 * Delta / PHX 6:05a } LGA 3:57p 1(6h 52m) 
select v United LGA 6:00p » PHX 10:45p 1(7h 45m) 
v Airlines 
selectall | clear Best 2 sites details email favorite 
M AirTran $305 
F Alaska Airlines $910 $270 yg Deta / PHX 11:05a > LGA 9:07p 1(7h 02m) 
MÍ American Airlines $305 select v United LGA 6:00p > PHX 10:45p 1(7h 45m) 
Continental $ 
JE 323 2 sites details email favorite 
M Delta $284 
ini => $270 North PHX 11:05a ;> LGA 9:07; 1(7h 02m) 
tBlue Ai 27 Iwest / :05a :07p m. 
"m uh dass pui w United LGA 6:00p >} PHX 10:45p 1(7h 45m) 
E Northwest $291 Orbitz.com details email favorite 
M United $273 
MÍ us Airways $279 $270 Delta / PHX 11:35p » LGA 10:00a 1(7h 25m) 
M Multiple Airlines $260 WF united LGA 6:00p > PHX 10:45p 1(7h 45m) 
Southwest jet info Cheaptickets details email favorite e 


O Kayak.com 是 美国 的 一 个 旅行 搜索 引擎 站 点 (kayak 意 为 爱斯基摩 人 用 的 皮 艇 )， 成 立 于 2004 


年 。 它 聚合 了 数 百 家 旅行 站 点 的 信息 ， 帮 助 用 户 预 订 航 班 、 旅 馆 、 游 船 ， 并 提供 租车 服务 。 
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择 。 如 果 是 首页 上 出 现 这 套 精 密 的 过 滤器 ， 可 能 就 有 点 过 分 了 ， 因 为 首页 的 目 
的 就 是 为 了 让 用 户 尽 可 能 容易 地 开始 搜索 ， 但 是 在 结果 页 面 中 ， 在 搜索 结果 的 
上 下 文中 ， 边 栏 能 够 让 用 户 了 解 如 何在 不 用 修改 搜索 条 件 的 前 提 下 继续 改进 搜 
索 ， 从 而 得 到 更 好 的 结果 。 


其 次 ， 我 们 可 以 用 多 种 方式 来 显示 过 滤器 。 既 可 以 像 关键 字 链 接 那样 简单 ， 
直接 前 往 子 分 类 或 者 其 他 内 容 页 ， 也 可 以 包括 一 大 堆 滑 动 条 、 复 选 框 和 单 选 按 
钮 ， 用 以 触发 实时 的 更 新 。Kayak 提供 的 就 是 这 些 实时 的 更 新 。 通 过 限定 航空 
公司 和 自己 喜欢 的 出 发 时 间 ， 用 户 可 以 轻松 地 缩小 搜索 范围 ， 从 而 只 看 那些 与 
标准 完全 匹配 的 结果 。 而 在 用 户 改变 过 滤 条 件 时 这 一 切 都 会 立即 发 生 : 搜索 结 
果 列 表 会 自动 更 新 ， 因 此 用 户 几 乎 能 立即 看 到 改变 后 的 结果 ， 而 无 需 等 待 整个 
页 面 重 新 加 载 。 


使 用 过 滤 搜 索 时 需要 注意 ， 要 想 让 用 户 使 用 它们 ， 就 必须 首先 吸引 用 户 的 
注意 。 而 这 一 点 实现 起 来 比 看 上 去 要 复杂 得 多 。Kayak 的 用 户 常常 会 完全 忽略 
布 满 过 滤器 的 边栏 ， 而 只 会 向 下 滚动 页 面 ， 在 结果 列表 中 逐 项 地 寻找 合适 的 航 
班 。( 因 为 与 旅游 相关 的 搜索 通常 都 以 受 限 快速 搜索 作为 开始 ， 而 受 限 快速 搜索 
常常 只 能 按 规定 输入 特定 的 信息 ， 而 不 允许 用 户 自 由 输入 搜索 词 ， 因 此 旅行 预 
订 的 用 户 如 果 不 修改 搜索 标准 ， 就 只 能 继续 忍受 大 量 的 搜索 结果 。) 当然 ， 把 结 
果 全 部 查看 一 遍 会 非常 浪费 时 间 ， 但 没有 注意 到 过 滤器 的 用 户 会 认为 这 是 他 们 
唯一 的 选择 。 因 此 ， 关 键 就 是 要 确保 过 滤 吉 能够 显而易见 。 比 如 在 边栏 中 ， 我 
们 可 以 使 用 与 搜索 结果 页 面 本 身 相 异 的 背景 色 来 突出 该 区 域 。Robert 最 近 评 审 
过 一 个 网 站 ， 它 的 边栏 所 用 的 背景 色 和 页 眉 区 域 完 全 相同 〈 用 的 是 橙色 ， 而 结 
有 果 区 域 的 背景 色 是 白色 )， 结 果 该 公司 的 可 用 性 测试 显示 ， 并 没有 太 多 用 户 发 现 
和 使 用 到 这 些 过 滤器 。( 当 然 ， 你 的 结果 可 能 不 同 ， 但 一 般 说 来 ， 颜 色 对 比 是 一 
种 非常 有 效 的 方式 ， 能 够 把 用 户 的 视线 吸引 到 某 个 页 面 区 域 。) 不 过 ， 就 像 刚 
才 说 的 ， 我 们 有 多 种 方式 显示 过 滤器 ， 而 布 满 控件 的 边栏 只 是 其 中 之 一 。 比 如 
Orbitz.com ”的 设计 师 就 把 网 站 的 过 滤器 放 在 了 搜索 结果 中 ， 如 图 4-8 所 示 。 


在 结果 区 域 的 顶部 ，Orbitz 用 一 个 矩阵 来 显示 提供 各 种 价位 航班 的 航空 公 
司 。 当 用 户 的 鼠标 悬 停 在 矩阵 中 的 某 个 矩形 上 时 ， 该 矩形 会 突出 显示 另 一 种 背 
景色 ， 同 时 该 行 和 该 列 的 标题 “显示 旅途 中 的 转机 次 数 和 提供 该 航班 的 航空 公 
司 ) 也 是 如 此 。 由 于 其 中 显示 了 航班 的 价格 ， 该 矩阵 其 实 已 经 完全 融入 了 结果 
本 身 ， 使 得 过 滤 带 变 成 整个 搜索 过 程 中 的 一 个 部 分 。 


(D Orbitz 是 一 个 互联 网 旅游 公司 ， 总 部 位 于 芝加哥 。 世 界 各 地 的 旅行 者 能 通过 Orbitz.com 研究 、 
计划 和 预定 多 种 多 样 的 旅行 产品 。 
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图 4-8 —— E 
orbitz 设 计 团 队 LIL TRE NO FLIGHT FEES + PRICE ASSURANCE = UNBEATABLE VALUE O Learn more 
把 过 滤器 与 搜索 
结果 融 为 一 体 
$528 $756 
799 
$528 
total $574 | total $630 | total $1,158 
Sort flights by: 
Change Search ‘Showing Multiple Carriers non-stop flights (12 flights out of 140 total) 
Find more flights for US Airways 
NOJBOOKINGIFEES) ERICK re 
US Airways 12 Choose 
-一 Depart9:00am Phoenix, AZ (PHX) 
== Arrive:4:56pm New York, NY (JFK) 
Non-stop Economy | 4hr 56min | Airbus A320 | View seats 
Return Sat, May 30 US Airways 15 Choose 
»——  Depart:6:35am New York, NY (JFK) this retur 
Arrive:9:11am Phoenix, AZ (PHX) 
Economy | Shr 36min | Airbus A320 | View seats 
从 图 4-9 PH WABI, Google 采取 了 一 种 更 为 简单 的 方式 : IOS 
面 的 底部 显示 两 行 推荐 搜索 词 链接 ， 让 用 户 能 够 直接 点 击 以 便 进 行 修改 后 的 搜 
R (如 果 用 户 看 到 这 些 链接 的 话 )。 而 正如 我 们 之 前 所 指出 的 ， 在 第 一 次 搜索 
后 ， 结 果 能 得 以 改善 的 几率 并 不 是 特别 高 。 
图 4-9 ^ [Find Cheap Flights to New York - Kayak |» > 
Google E js mw. cheapest New York flights found by Kayak users recent. Use the links to 
滤 选 项 放 在 了 上 petens rete ÓN NYC.f.ksp - 81k - Cached - Similar pages 
Tox al 7 [searches related to: flights to NYC 
$ 他 A 保 flights las vegas to new york flights san diego to new york flight deals to new york flights new york puerto rico 
= E: j 位 TH - flight new york punta cana flights new york fort lauderdale flights new york san antonio flight new york salt lake city 
底部 
446 ”分 页 


身 为 搜索 领域 的 黄金 标杆 ，Google 普及 了 许多 设计 模式 ， 其 中 之 一 就 是 分 
页 (Pagination) 模式 ， 如 图 4-10 所 示 。 该 界面 包括 一 系列 页 人 码 数字 链接 ， 前 
后 分 别 有 Previous 和 Next 按钮 ， 让 用 户 能 够 在 多 个 搜索 结果 页 面 间 来 回 跳 转 ， 
也 能 一 次 跳 过 多 个 页 面 。 
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Google 并 不 是 第 一 个 使 用 这 种 分 页 模式 的 网 站 〈 早 在 1997 年 Google 诞生 
之 前 就 有 不 少 知名 搜索 引擎 使 用 它 了 )， 但 却 是 全 能 的 Google 让 它 成 为 网 络 上 
最 为 知名 的 分 页 界面 形式 。 正 因为 Google 采用 了 这 一 模式 ， 它 便 被 无 数 系统 模 
仿 ， 包 括 其 他 各 大 搜索 网 站 ， 以 及 大 量 从 新 闻 到 商务 的 各 种 目录 网 站 。 不 过 ， 
与 其 他 网 站 不 同 ，Google 在 设计 中 加 入 了 一 点 幽默 感 ， 根 据 在 结果 页 面 显 示 多 
少 个 页 码 链接 ， 其 名 称 Google 中 字母 (准确 说 应 该 是 字母 O0) 的 数量 也 会 不 停 
地 增加 。 


Goooooooooogle » 
12345678910 Next 


由 Add a result - See all my SearchWiki notes - See all notes for this SearchWiki - Learn more 


尽管 这 种 幽默 感 增加 了 Google 品牌 的 个 性 ， 这 一 特色 其 实 并 不 是 必 不 可 少 
的 。 从 可 用 性 角度 来 说 ， 最 重要 的 是 这 个 界面 提供 了 一 种 能 在 一 系列 页 面 间 来 
回 穿梭 的 方式 ， 而 且 实 现 得 完美 无 缺 。 显 示 页 码 数字 说 明 还 有 更 多 结果 ， 而 且 
很 容易 取得 。 箭 头 图 标 和 Previous 和 Next 按钮 则 提供 了 比较 大 的 点 击 区 域 ， 而 
且 与 较 小 的 数字 链接 分 离开 来 。 当 前 页 面 数字 的 不 同 外 观 则 向 用 户 传达 出 他 们 
此 刻 所 在 的 位 置 。 


实际 上 ， 当 设计 师 们 想 在 分 页 的 设计 上 要 点 手腕 时 ， 事 情 总 会 变 糟 。 最 典 
型 的 例子 就 是 所 谓 的 无 限 深 动 模式 。 想 法 其 实 很 简单 ， 把 所 有 的 结果 都 载 和 到 
同一 个 页 面 ， 而 不 是 分 散 到 多 个 页 面 。 理 论 上 ， 这 种 做 法 倒是 很 合情合理 ， 因 
为 它 使 用 户 避 免 了 点 击 翻 页 、 等 待 载 入 新 页 面 的 麻烦 。 然 而 ， 无 限 深 动 打破 了 
用 户 的 预期 ， 而 且 会 造成 不 少 的 困惑 “〈 也 可 能 再 加 上 一 两 个 被 手 碎 的 键盘 )。 


根据 非 正式 的 观察 ， 用 户 普遍 期 待 在 结果 页 的 底部 看 到 分 页 界面 。 而 没有 
分 页 界面 的 结果 页 可 能 会 让 用 户 感到 意外 ， 不 太 受 欢迎 。 在 一 次 非 正式 的 研究 
中 ， 用 户 被 要 求 在 一 次 图 片 搜索 中 寻找 一 张 特定 的 照片 ， 该 照片 深 藏 于 无 限 滚 
动 页 面 里 的 一 系列 结果 中 。 其 中 一 位 用 户 ， 也 是 研究 中 最 具 代 表 性 的 用 户 ， 滚 
动 了 很 长 的 距离 想到 达 页 面 的 底部 。 一 开始 ， 他 用 鼠标 往 下 拖 动 滚动 条 ， 当 这 
不 起 作用 时 ， 他 把 鼠标 移动 到 滚动 条 底部 的 箭头 控件 上 ， 开 始 不 停 地 点 击 ， 想 
看 看 有 没有 帮助 。 当 这 也 不 成 功 时 ， 他 开始 敲 键盘 的 下 方向 键 ， 发 现 还 是 没有 
帮助 的 时 候 ， 他 开始 用 更 大 的 力量 敲 击 键盘 ， 似 乎 相信 单纯 依靠 意志 的 力量 就 
能 带 来 想 要 的 结果 ， 就 好 像 电子 游戏 玩家 在 希望 角色 朝 正 确 方向 前 进 时 也 会 朝 
该 方向 扭曲 身体 一 样 。 最 终 ， 他 用 的 力量 越 来 越 大 ， 以 至 于 敲 击 声 在 试验 用 的 
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可 事实 上 已 经 成 
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屏幕 录像 软件 中 都 能 听 到 。 可 怜 的 键盘 在 当天 受到 了 不 少 痛 殴 。 
再 次 地 ， 小 狗 很 可 爱 ， 虫 子 很 恶心 ， 而 Google 很 有 效 。 


本 书 的 主旋律 ， 其 实 要 想 表现 出 设计 模式 文档 的 局 限 性 ， 分 页 界面 就 是 一 
个 很 好 的 例子 。 在 著名 的 模式 资源 库 网 站 Welie.com 上 ， 分 页 模式 (该 网 站 称 
之 为 “paging” 模 式 ) 的 问题 描述 项 中 是 这 么 陈述 的 :“ 用 户 需 要 在 大 规模 的 对 
象 列 表 中 寻找 自己 最 感 兴趣 的 对 象 . ”尽管 这 段 陈 述 在 字面 上 的 确 描 述 了 该 模式 
所 解决 的 问题 ， 但 却 没 有 对 真正 的 问题 进行 解释 。 它 没有 揭示 该 模式 是 如 何 融 
入 到 搜索 这 一 更 大 的 上 下 文 情境 中 去 的 一 一 也 就 是 何 时 、 怎 样 以 及 为 什么 搜索 。 
这 也 是 我 们 说 框架 体系 是 设计 模式 的 必然 进化 的 原因 。 框 架 体 系 能 够 把 设计 模 
式 拉 回 到 上 下 文 情境 中 来 。 


45 设计 标准 
在 某 种 程度 上， 搜索 框架 的 设计 标准 与 目录 框架 其 实 是 背道而驰 ， 因 为 搜 
索 是 在 分 类 导航 不 起 作用 时 为 用 户 提 供 的 一 种 后 备 选 择 。 正 如 我 们 所 看 到 的 ， 


搜索 要 想 有 效 ， 不 仅 需要 立即 生效 、 符 合用 户 的 期 望 ， 还 得 在 网 站 导航 无 法 提 
供用 户 需要 的 信息 时 提供 文 援 。 


不 过 和 大 多 数 框架 不 同 ， 搜 索 框 架 的 设计 标准 其 实 是 显而易见 的 。 不 管 是 
什么 网 站 ， 面 向 哪 类 访问 者 ， 在 规则 上 基本 都 没有 差别 。 


45.1 提供 多 条 通 向 内 容 的 路 径 


与 我 们 的 直觉 相反 ， 改 善 搜索 的 方法 之 一 就 是 不 要 过 于 关注 搜索 ， 而 是 想 
办 法 改善 网 站 的 导航 。 再 重复 一 次 ， 设 计 标准 指 的 是 设计 背后 的 促 发 因素 一 一 
是 有 关 设计 如 何 帮助 用 户 完成 任务 的 规则 。 正 是 由 于 这 个 原因 ,“ 提 供 多 条 通 向 
内 容 的 路 径 ” 成 了 搜索 框架 的 标准 之 一 。 如 果 一 个 网 站 里 大 部 分 都 是 非 唯一 标 
识 的 内 容 ， 那 么 用 户 最 好 完全 绕 过 搜索 ， 而 主要 依靠 网 站 的 信息 架构 来 寻找 信 
自 


JU Oo 


从 实践 角度 来 看 ， 那 些 当 初 迫 使 用 户 搜索 的 地 方 ， 正 是 你 的 网 站 可 供 改 
进 之 处 。 请 记 住 ， 只 有 当 网 站 导航 出 了 问题 时 人 们 才 会 搜索 。 通 过 观察 用 户 在 
网 站 上 的 搜索 习惯 ， 你 就 能 发 现 调整 导航 或 信息 架构 的 方法 ， 从 而 帮助 他 们 不 
通过 搜索 就 能 找到 内 容 。 这 并 不 是 说 你 应 该 完全 依赖 于 网 站 指标 来 做 决定 〈 正 
相反 ， 你 应 该 通过 观察 用 户 ， 把 网 站 指标 放 到 上 下 文中 来 辨别 他 们 这 样 搜索 的 
原因 )， 但 仍然 可 以 根据 指标 做 出 一 些 改变 。 如 果 在 你 的 男装 网 站 上 有 很 多 人 


4.5 设计 标准 


都 在 搜索 jeans《〈 牛 仔裤 )， 可 能 就 表明 他 们 没有 找到 通 向 合适 分 类 的 链接 ， 而 
在 其 他 分 类 导航 里 也 没有 。 如 果 被 搜索 的 是 通用 词汇 ， 可 以 将 其 作为 分 类 名 
放 和 一 级 导航 中 去 。 如 果 并 不 是 很 常用 的 词汇 ， 例 如 青春 款式 工 恤 Cbaby-doll 
Tshirts)， 则 可 以 在 女 式 工 恤 的 分 类 下 添加 该 导航 ， 让 它们 更 容易 被 发 现 。 


不 过 《这 一 点 似乎 无 需 袭 述 ， 但 很 有 代表 性 ， 因 此 仍然 值得 一 提 )， 不 要 因 
为 那些 只 搜索 过 几 次 的 词汇 就 随意 改变 网 站 的 导航 。 请 找 准 那些 最 明显 的 趋势 。 
通常 ， 只 有 名 列 前 茅 的 搜索 词 才 值 得 被 调整 进 导航 。 如 果 一 有 风吹草动 就 修改 
网 站 ， 会 因为 过 于 照顾 小 众 而 让 大 多 数 人 感觉 更 难 完成 任务 。 永 远 不 要 因为 少 
数 人 而 牺牲 大 多 数 人 的 易 用 性 。 


45.2 ”使 内 容 与 用 户 的 用 词 相 关联 


如 果 网 站 里 规划 的 词汇 与 用 户 的 触发 词 不 能 吻合 ， 用 户 便 会 寻找 并 尝试 另 
一 种 方法 来 寻找 内 容 ， 多 半 都 会 进行 搜索 。 不 过 对 于 大 多 数 网 站 来 说 ， 要 想 在 
每 一 个 页 面 里 都 包含 所 有 触发 词 ， 结 局 很 可 能 会 是 一 个 王 梦 ， 而 且 实际 上 ， 这 
么 做 可 能 会 极 大 地 降低 网 站 的 可 用 性 。 因 此 当 用 户 开始 搜索 时 ， 按 照 他 们 预期 
的 方式 进行 搜索 是 最 为 关键 的 。 为 了 达到 这 个 目的 ， 最 重要 的 是 把 网 站 的 内 容 
与 尽 可 能 多 的 不 同 词汇 相关 联 (关键 字 、 标 签 ， 等 等 ); 不 管用 户 输入 什么 搜 
索 词 ， 都 能 得 到 好 的 结果 。 这 个 元 数据 〈 有 关 信 息 的 信息 ， 描 述 数据 的 数据 ) 
非常 重要 ， 它 能 创建 第 一 次 就 能 生效 的 搜索 系统 ， 并 且 日 后 的 每 一 次 都 会 生效 。 

亚马逊 实现 了 这 一 想法 ， 鼓 励 用 户 把 产品 与 他 们 自己 的 关键 字 进 行 关联 
OLAI 4-11)。 用 户 能 够 为 产品 指定 自己 认为 合适 的 关键 字 。 通 过 此 举 ， 亚 马 逊 
不 仅 能 持续 扩建 自己 的 相关 关键 字 资 源 库 ， 同 时 也 让 用 户 亲 自 参与 到 网 站 之 中 。 


Suggested Tags from Similar Products (what's this?) 
Be the first one to add a relevant tag (keyword that's strongly related to this product). 


Check a corresponding box or enter your own tags in the field below. 


© user experience (24) © usability (17) [ internet (4) 

© interaction design (23) © web design (17) © information architecture (3) 
© ui design (23) © design (13) ( deliverables (2) 

© interface design (21) G ux (10) 

Your tags: 


(Press the 'T' key twice to quickly access the "Tag this product" window.) 


Help others find this product — tag it for Amazon search 


45.3 ”让 内 容 便于 识别 
便于 记忆 的 东西 就 是 便于 寻找 的 东西 。 


92 第 4 章 搜索 框架 


在 搜索 数码 相机 时 ， 如 果 名 字 里 包含 XJ7220 这 样 的 型 号 ， 可 能 就 很 难 记 
住 。 但 如 果 这 部 相机 的 名 字 叫 Echo 3， 就 更 便于 记忆 ， 也 更 便于 和 其 他 人 谈论 ， 
或 者 在 网 站 里 搜索 。 当 内 容 以 简单 词汇 命名 时 ， 它 就 更 容易 记 住 ， 更 容易 搜索 ， 
也 更 容易 向 其 他 人 介绍 。 


可 能 你 没 办 法 控制 那些 产品 怎样 命名 ， 但 却 可 以 影响 网 站 里 其 他 内 容 的 命 
名 习惯 。 比 如 你 可 以 缩短 文章 的 标题 ， 让 它们 更 便于 记忆 。 页 面 标题 也 是 如 此 。 
名 为 “我 们 的 用 户 体验 策略 ”的 页 面 肯 定 要 比 “ 用 户 体验 策略 制订 过 程 中 的 艺 
术 与 科学 ”好 记得 多 。 


不 过 ， 在 使 用 更 长 或 更 短 版 本 的 内 容 链接 时 ， 一 定 要 选择 好 时 机 。 在 网 站 
的 主导 航 中 ， 精 干 简洁 是 最 好 的 。“ 关 于 我 们 ”(About Us) 就 是 一 个 绝对 适用 
于 全 局 导航 的 标签 ， 因 为 它 说 明了 下 一 个 页 面 的 名 称 ， 同 时 也 表现 出 它 大 概 会 
包含 什么 内 容 〈 有 关公 司 的 信息 )。 不 过 ， 如 果 是 在 内 容 中 间 ， 或 者 是 在 搜索 结 
果 页 面 里 ， 最 好 使 用 较 长 的 链接 标签 ， 因 为 它们 能 帮助 用 户 确定 下 一 个 页 面 是 
和 否 会 包含 他 想 要 的 内 容 。 比 如 ,“ 我 们 在 该 领域 已 经 完成 了 数 次 实验 ”( 以 实验 
作为 链接 ) 这 句 话 就 给 人 不 确定 的 感觉 。 这 个 实验 的 链接 会 指向 哪里 ? 是 另 一 
个 网 站 ? 还 是 该 公司 所 有 实验 的 列表 ? 或 者 是 其 中 一 次 试验 的 专题 页 面 ? 而 修 
改 后 的 这 句 话 “我 们 在 该 领域 已 经 完成 了 数 次 实验 ， 其 中 包括 猫 对 抗 地 心 引 力 
的 能 力 ” 则 更 能 让 用 户 确定 这 个 链接 指向 的 页 面 讲述 了 一 只 猫 试 图 抵抗 地 心 引 
力 的 实验 。 


重复 一 遍 ， 便 于 记忆 的 内 容 就 是 便于 寻找 的 内 容 。 虽 然 并 不 是 所 有 网 站 都 
能 像 Google 那样 做 到 第 一 次 就 生效 、 每 一 次 都 生效 《当然 它们 应 该 为 此 多 加 努 
力 )， 但 大 部 分 网 站 都 能 对 本 章 所 提 到 的 各 个 框架 元 素 进行 调整 ， 同 时 依照 搜索 
数据 和 可 用 性 测试 结果 对 网 站 导航 加 以 改进 ， 从 而 极 大 地 改进 自己 的 搜索 系统 。 


F008 年 7 月 ，Spinscape ”发布 了 他 们 基于 网 页 的 思维 导 图 Cmind-maping? 
一 应 用 ， 声 称 将 会 添加 大 量 引 人 注 目的 功能 超越 竞争 对 手 ， 让 用 户 更 为 轻松 
地 制作 思维 导 图 。 根 据 Spinscape.com 的 描述 ， 思 维 导 图 是 “一 个 或 一 系列 图 


用 以 表现 词语 、 创 意 、 任 务 或 其 他 链接 到 中 心 关 键 词 或 想法 的 条 目 ， 并 且 

些 条 目 围绕 中 心 关键 词 或 想法 进行 放射 状 排列 ”> 。 本 质 上 它 是 一 种 产生 和 组 
re 多 人 合作 、 人 解决 问题 并 做 出 决定 的 方法 。 不 过 ， 由 于 思维 导 图 对 于 大 
多 数 人 来 说 仍然 是 一 个 贺 新 的 概念 ， 用 户 在 第 一 次 访问 Spinscape 的 首页 时 难免 
会 心 生 疑问 : 


我 在 这 能 做 些 什 么 
个 网 站 能 提供 哪些 对 我 很 重要 的 东西 ? 


那些 越过 第 一 组 问题 ， 并 且 有 意 深入 的 用 户 又 会 遇 到 新 的 一 组 问题 。 


O Spinscape 是 一 个 提供 在 线 思维 导 图 服务 的 网 站 ， 可 免费 试用 ， 无 需 安装 任何 软件 。 在 
Spinscape 上 制作 的 思维 导 图 每 一 个 节点 都 是 富 媒 体 ， 可 附加 标注 、 链 接 及 文本 、 图 像 
等 ， 同 时 整合 了 更 多 的 工具 ， 例 如 Google Doc, Wikipedia, Delicious 等 。 网 站 见 http:// 
spinscape.com. 

@ 根据 维基 百科 的 定义 ， 思 维 导 图 是 “一 种 图 像 式 思 维 的 工具 ， 或 者 是 利用 图 像 式 思考 辅助 

工具 来 表达 思维 的 工具 ”， 因 此 很 适合 在 脑力 风暴 、 创 意 、 文 案 规划 或 记录 笔记 等 场合 

使 用 。 
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我 应 该 怎样 开始 ? 

我 是 否 必须 得 注册 ? 如 果 是 ， 应 该 怎样 注册 ? 

事实 上 ， 用 户 在 首次 访问 各 种 网 站 时 都 会 问 这 些 问题 。 而 在 Spinscape.com 
上 ， 这 些 问题 可 能 很 难 回答 ， 甚 至 那些 很 熟悉 思维 导 图 的 用 户 也 是 如 此 ， 如 图 
5-1 zn. 


图 5-1 
gu , 
Spinscapeis, A S p Insca p e" A VISUAL WAY TO ORGANIZE YOUR INFORMATION ONLINE 
诉 我 们 它 能 提供 


什么 


FT © ADDTHIS aon. 


GET SPINSCAPE 


LEARN MORE D a 
What Is Mind Mapping? 4 
s 
ew Features 
g 
Events 
SUPPORT C 
Wh: 


LOGIN already have an account? Welcome to Spinscape! Spinscape is an exciting, dynamic web 


username application for mind mapping and visual collaboration. 
password With a FREE Spinscape account, you can create interactive 
maps that allow you to organize the huge volumes of information 
and data you're faced with daily. Upgrade to Premium and you 
can allow others to brainstorm with you, edit the map and even 
Forgot your password? chat as youre creating it! I's a completely new way of 


discovering, managing and sharing information by enabling 
people to collaborate over the web in real time. 
GET STARTED 


Spinscape 试图 告诉 我 们 ， 它 提供 的 是 “一 种 可 视 化 的 在 线 组 织 信息 的 广 
式 ”。 它 还 告诉 我 们 ， 只 需要 填写 一 个 注册 表单 ， 是 的 ， 我 们 可 能 需要 创建 一 个 
帐户。 但是， 我 们 怎样 才能 知道 软件 是 否 好 用 ? 我 们 怎样 创建 一 个 账户 ? 我 们 
如 何 才能 相信 注册 的 确 物 有 所 值 ? 思维 导 图 到 底 是 个 什么 概念 ? 对 于 这 些 问题 
网 站 传达 出 来 了 哪些 信息 ? 


也 许 你 已 经 猜 到 ， 这 些 问 题 的 答案 是 : 网 站 什么 也 没 干 。 至 少 我 们 不 能 一 
目 了 然 ， 而 这 才 是 我 们 需要 的 。 要 想 理解 思维 导 图 ， 我 们 必须 观看 视频 ， 或 者 
访问 So What is Mind Mapping?〔 什 么 是 思维 导 图 ?) 页 面 。 要 想 了 解 网 站 的 功 
能 ， 我 们 需要 访问 Spinscape Advantages (Spinscape 的 好 处 ) 页 面 。 要 想 深 入 尝 
试 ， 我 们 必须 找到 那个 位 于 首页 底部 、 很 难 发 现 的 Get Started (开始 体验 ) 链 
接 。 


5.2 上下文 情境 


但 这 不 是 我 们 想 要 的 回答 问题 的 方式 。 我 们 希望 扫 一 眼 页面 ， 然 后 在 尽 可 
能 短 的 时 间 内 得 到 尽 可 能 多 的 答案 。 在 上 刀 眼 之 间 ， 脑 中 就 形成 了 自然 的 印象 。 
Spinscape 能 为 我 做 什么 ?告诉 我 ， 马 上 ! 


Spinscape 运用 了 注册 框架 6 个 构成 元 素 中 的 两 个 。 另 有 一 个 使 用 不 当 ， 还 
有 3E AH). "i. 


5.1 描述 


注册 框架 的 目的 是 劝说 访问 者 进行 注册 并 成 为 固定 用 户 、 活 跃 的 一 份子 、 
乐于 付 钱 的 消费 者 。 它 的 目的 不 仅 是 为 了 消除 用 户 在 注册 前 可 能 产生 的 异议 ， 
同时 还 要 吸引 他 们 (也 许 这 一 点 更 为 重要 )。 


该 框架 由 6 个 关键 元 素 组 成 。 尽 管 它们 看 上 去 微不足道 ， 但 每 一 个 对 成 功 
都 至 关 重 要 ， 每 一 个 都 会 影响 到 你 最 终 是 损失 一 位 访问 者 还 是 得 到 一 位 顾客 。 
整个 框架 本 身 则 决定 你 的 客户 转化 率 是 可 怜 的 1% 或 2%， 还 是 10%。 这 可 是 数 
千 美 元 和 数 万 美元 的 区 别 ， 或 者 说 是 百 万 美元 和 千 万 美元 的 区 别 。 


注册 框架 的 作用 是 在 用 户 扫 视 屏幕 时 回答 他 们 脑海 中 产生 的 问题 。 但 它 真 
正 的 作用 则 是 在 潜意识 中 呼吁 用 户 做 出 决定 ， 引 发 足够 强烈 的 感官 刺激 ， 让 他 
们 对 未 知事 物产 生 渴望 。 给 予 他 们 足够 的 信息 ， 使 得 他 们 想 要 了 解 更 多 。 吸 引 
他 们 足够 多 的 注意 力 ， 劝 说 其 采取 行动 。 


在 本 质 上 ， 注 册 框架 纯粹 是 为 了 荔 说 而 存在 ， 唤 起 用 户 的 冲动 从 而 进行 深 
A. 
5.2 ”上下文 情境 


注册 框架 适用 于 那些 需要 用 户 注册 的 应 用 程序 ， 以 便 他 们 掌控 或 管理 自己 
创建 的 内 容 ， 例 如 保存 、 发 布 、 存 储 ， 等 等 。 这 些 应 用 通常 都 用 独立 的 网 站 表 
示 ， 访 问 者 只 需 进入 一 级 营销 页 面 ， 例 如 首页 或 “了 解 更 多 ”页 面 即 可 。 当 然 
也 有 些 应 用 隶属 于 更 大 网 站 的 一 部 分 。 


比如 ，TurboTax "和 H&R Block “要 求 用 户 先 创建 账户 才能 使 用 他 们 的 报税 


O TurboTax 是 Intuit 公司 于 1993 年 开发 的 一 款 报税 代理 软件 。 网 站 是 http://turbotax.intuit.com。 
O H&R Block 是 一 家 报税 代理 商 ， 在 全 世界 拥有 2200 多 万 客户 。 网 站 是 http://www.hrblock.como 
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代理 软件 。Netflix“ “和 GreenCine ”也 是 如 此 ， 用 户 在 向 他 们 租赁 DVD， 要 求 送 
货 上 门 之 前 必须 先 注 册 。 同 样 ， 要 想 使 用 Blinksale ”和 FreshBooks “创建 和 管理 
结算 单 ， 我 们 也 必须 先 创建 账户 。 


该 框架 并 不 适用 于 商业 环境 下 的 那 种 转换 ， 例 如 在 零售 网 站 购买 一 件 产 品 。 
比如 ， 在 Target.com 上 买 一 复 落 地 灯 就 没有 必要 事先 注册 (实际 上 在 该 网 站 干 
什么 都 不 用 注册 )。 

注册 框架 一 般 出 现在 一 个 应 用 程序 网 站 或 微型 网 站 〉 的 一 级 营销 页 面 ， 
但 也 可 以 整合 到 应 用 程序 本 身 之 中 (5.4.5 节 将 会 继续 讨论 )。 营 销 页 面 可 以 是 
首页 或 “了 解 更 多 ”页 面 ， 也 可 以 是 任何 你 能 直接 或 间接 鼓励 访问 者 注册 《〈 例 
如 罕 出 该 应 用 的 功能 或 好 处 ) 的 页 面 。 它 通常 也 包括 一 个 单独 的 注册 页 面 。 


5.3 任务 流程 


就 完成 任务 而 言 ， 注 册 框 架 非常 简单 。 通 常 一 位 用 户 访问 了 首页 〈 也 可 能 
是 “了 解 更 多 ”页 面 或 者 “功能 ”页 面 )， 扫 描 了 相关 《了 且 简短 ) 的 描述 ， 或 许 
就 会 开始 注册 的 过 程 。 他 会 填写 注册 表单 ， 被 确认 为 新 的 成 员 ， 然 后 开始 使 用 
该 应 用 。 我 们 将 在 5.4.5 节 介 绍 另 一 种 任务 流程 ， 用 户 在 注册 前 就 可 以 尝试 该 应 
用 ， 只 在 绝对 必须 深入 下 去 时 才 会 被 要 求 注册 。 


5.4 构成 元 素 
以 下 是 注册 框架 所 包含 的 构成 元 素 。 
5.4.1 价值 声明 


在 用 户 猜 测 网 站 提供 的 功能 及 其 意义 的 那 一 时 刻 ， 价 值 声明 能 为 他 们 解答 
疑惑 。 作 为 设计 师 ， 如 果 我 们 不 能 在 转瞬 间 表达 出 一 个 应 用 程序 的 用 途 ， 就 会 


O Netflix 是 美国 一 家 在 线 提供 DVD 邮政 租赁 的 服务 商 ，1997 年 成 立 。 该 公司 拥有 10 万 部 影 
视 剧 集 ， 超 过 5 500 万 张 光碟 ， 平 均 每 天 向 顾客 递送 200 万 张 DVD。2009 年 4 月 ， 公 司 宣 
布 已 邮递 了 超过 20 亿 张 DVD。 网 站 是 http://www.netflix.como 

O GreenCine 是 和 Netflix 类 似 的 一 家 美国 在 线 DVD 租赁 服务 商 ， 拥 有 9 万 部 影视 剧 集 ， 递 送 
范围 以 洛杉矶 为 中 心 。 同 时 还 包括 姊妹 站 点 BlueCine。 网 站 见 http://www. greencine.como 

@ Blinksale 是 由 Firewheel Design 开发 的 在 线 货 单 服 务 。 用 户 可 以 轻松 地 在 线 创 建 、 发 送 并 跟 
踪 货 单 ， 同 时 还 可 选择 Blinksale 提供 的 多 种 模板 。 网 站 是 http://www.blinksale.com. 

O FreshBooks 是 一 个 在 线 结算 服务 软件 ， 由 2ndSite 公司 开发 。 它 以 自由 职业 者 和 小 型 企业 
为 主要 客户 ， 提 供 进 度 追 踪 、 开 支 追踪 、 在 线 支付 、 单 据 邮 递 等 多 项 功能 。 网 站 是 http:/ 


www.freshbooks.com. 
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失去 用 户 的 注意 。 而 注意 是 最 难 赢得 的 东西 之 一 。 


要 想 快 速 向 用 户 解 释 这 是 个 什么 样 的 应 用 ， 文 字 是 最 好 的 工具 之 一 。 但 如 
果 你 摆 上 大 段 的 欢迎 信息 则 毫 无 作用 ， 因 为 没 人 会 读 这 种 泛泛 的 问候 语 。 简 短 、 
易 记 和 引 人 注 目 才 是 最 好 的 。 要 想 达 到 这 一 目的 ， 基 于 文本 的 价值 声明 应 该 像 
精心 炮制 的 电梯 陈述 一 样 ， 在 搭乘 电梯 的 短暂 时 间 内 就 描述 清楚 。 它 可 以 是 几 
个 字 ， 也 可 以 是 一 到 两 句 话 。 


不 过 ， 仅 仅 琢磨 用 词 是 不 够 的 一 一 价值 声明 必须 出 现在 用 户 都 能 看 到 的 明 
显 的 位 置 上 ， 例 如 twitter 以 前 版 本 的 首页 (如 图 5-2 所 示 )。 


. - 图 5-2 
What is Twitter? twitter 措 述 它 的 


作 


Twitter is a service for friends, family, and co-workers 
to communicate and stay connected through the 
exchange of quick, frequent answers to one simple 


question: What are you doing? 


Get Started Now! REN 


twitter 用 一 段 小 简介 描述 了 自己 的 用 途 ， 同 时 说 明了 该 服务 可 能 带 来 的 好 
处 。 这 上段 文本 出 现在 首页 上 明显 的 位 置 ， 很 容易 引起 注意 ， 所 以 就 算是 从 没 听 
说 过 twitter (或 者 听 说 过 但 不 了 解 ) 的 人 ， 也 能 很 快 了 解 到 这 个 网 站 对 自己 是 
否 有 帮助 。 

Ait, twitter 的 价值 声明 包含 了 29 个 单词 ， 要 想 让 顺便 来 访 的 人 一 眼 
看 清楚 似乎 稍 嫌 多 了 一 点 。 简 介 一 定 要 快速 打消 用 户 的 顾虑 。 在 这 一 点 上 ， 
Blinksale 用 “更 少 ” 做 到 了 “更 多 ” 如 图 5-3 所 示 。 


图 5-3 


LA 
Blinksole Blog Learn Signup*® Login Blinksaley 少 


做 到 了 EC 


“Blinksale rocks!” 
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只 有 短 短 7 个 单词 ，Blinksale 准确 地 表达 了 它 是 做 什么 的 ， 用 户 使 用 它 又 
能 获得 什么 。 这 些 单词 都 经 过 了 精 挑 细 选 ， 确 保 访问 者 很 快 就 能 了 解 网 站 。 这 
7 个 单词 中 的 3 个 ， 也 就 是 easiest. invoices 和 online， 是 不 可 缺少 的 关键 字 。 


最 轻松 、 结 算 单 、 在 线 ， 用 户 需要 知道 的 全 在 里 面 了 。 


Spinscape 也 有 一 段 价值 声明 :“A visual way to organize your information 
online〈 在 线 组 织 信息 的 可 视 化 方式 )。” 但 是 ， 这 段 描述 被 埋藏 在 网 站 的 页 首 区 
域 ， 没 有 换行 的 一 长 段 文本 淹没 于 其 他 元 素 之 中 ， 可 能 会 极 大 地 降低 用 户 的 注 
意 ， 从 而 也 很 难 吸引 人 们 去 阅读 、 理 解 并 执行 操作 。 


twitter 和 Blinksale 这 两 个 例子 说 明 ， 价 值 声明 一 定 要 保证 一 目 了 然 ， 位 于 
最 突出 的 位 置 。Spinscape 能 为 我 做 什么 ? 


告诉 我 ， 马 上 ! 
5.4.2 投入 成 本 了 明细 


某 家 大 型 航空 公司 举办 了 一 次 满意 度 调查 ， 空 乘 人 员 在 旅客 下 机 时 向 他 们 
散发 卡片 ， 指 引 他 们 登录 该 航空 公司 的 网 站 ， 并 许诺 填写 完 调查 表 将 会 得 到 丰 
厚 的 奖品 。 


虽然 有 很 多 旅客 都 参与 了 调查 ， 但 却 极 少 人 能 够 完成 ， 大 部 分 都 卡 在 了 要 
求 他 们 输入 机 票 号 码 的 那 一 步 《〈 在 登 机 牌 存根 上 能 够 找到 )。 用 户 没 想 到 自己 还 
需要 这 种 信息 ， 而 且 存 根 也 肯定 不 会 随时 都 在 手边 。 


许多 应 用 程序 都 要 求 用 户 在 注册 过 程 中 提供 一 些 信息 ， 例 如 客户 编号 、 信 
用 卡 、 或 者 汽车 所 有 权 复 印 件 ， 等 等 。 如 果 应 用 程序 没有 预先 提醒 就 收集 这 些 
信息 ， 难 免 会 让 用 户 感到 意外 ， 而 这 常常 会 导致 他 们 犹豫 是 否 应 该 继续 下 去 。 
(怀疑 是 否 会 要 求 提供 更 多 不 明 的 信息 。) 

除了 需要 的 信息 之 外 ， 如 果 注 册 要 求 的 时 间 比 用 户 计划 的 要 长 ， 他 们 也 会 
感到 意外 。 用 户 意识 到 要 想 掌 握 和 使 用 这 个 应 用 程序 ， 必 须 付出 比 预期 多 得 多 
的 努力 。 

原本 希望 进行 一 次 快速 交互 的 用 户 ， 会 因为 应 用 程序 要 求 更 多 的 时 间 而 备 
感 压力 ， 因 为 他 们 的 时 间 可 能 并 不 充裕 。 如 果 应 用 程序 无 法 树立 正确 的 预期 ， 
原本 应 该 很 积极 的 一 次 体验 可 能 很 快 就 会 让 人 感到 诅 丧 。 


再 次 地 ， 可 用 性 测试 能 够 帮助 设计 师 了 解 用 户 形成 的 预期 。 在 开始 任务 之 
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前 ， 先 请 用 户 预 测 自己 需要 什么 〈 包 括 对 辅助 信息 和 时 间 的 需求 )， 这 有 助 于 我 
们 判断 他 们 的 预期 是 否 正确 。 


现场 研究 也 能 帮助 我 们 识别 交互 所 适用 的 上 下 文 情境 。 比 如 ， 设 计 团队 可 
能 会 发 现 原本 必需 的 单据 信息 其 实 根本 无 法 得 到 ， 因 为 用 户 早已 把 单据 给 报销 
了 。 因 此 他 们 需要 另 一 种 验证 方法 ， 例 如 查阅 单据 的 在 线 记 录 。 


在 用 户 为 某 个 应 用 程序 注册 时 ， 事 先 一 定 要 清楚 地 传达 出 他 们 需要 了 解 什 
么 、 做 什么 ， 这 样 用 户 才能 佑 计 出 成 功 注册 需要 多 少 投入 。 在 这 里 ，Blinksale 
又 一 次 做 到 了 成 功 。 


Blinksale 的 首页 上 提供 了 6 个 小 型 信息 图 表 ， 每 一 个 图 表 都 刻画 出 该 应 用 
的 其 中 一 个 功能 ， 以 及 所 带 来 的 好 处， 如 图 5-4 所 示 。 如 果 一 位 访问 者 正在 考 
虑 是 否 应 成 为 Blinksale 的 客户 ， 这 些 图 表 都 能 帮助 他 把 迟疑 和 犹豫 转化 为 自 


信 。 
图 5-4 
Invoice 10001 Who is this invoice for? i Blinksale (# 
ga eo 
Due 21 May 2006 (NET 30) import a chen! 'om secamp "Yl 展现 E 功能 和 带 


来 的 好 处 


Dashboard Invoices 


Filter: MAI | Unpaid 


简 而 言 之 ， 人 们 想 知道 自己 会 得 到 什么 。 因 此 我 们 的 第 二 个 构成 元 素 一 一 
投入 成 本 明细 Cinvestment breakdown) 一 一 就 提供 了 价值 声明 无 法 传达 的 信息 ， 
比如 存在 哪些 功能 ， 以 及 如 何 使 用 它们 。 


虽然 投入 成 本 明细 强调 的 只 是 应 用 程序 的 功能 和 好 处 ， 但 它 其 实 表达 了 这 
个 应 用 程序 的 使 用 难度 。 如 果 看 上 去 像 工 作 那 样 ， 就 会 让 人 觉得 投入 很 沉重 。 
如 果 看 上 去 很 简单 ， 就 会 觉得 投入 并 不 大 ， 而 且 很 容易 克服 。 


请 注意 ， 它 的 功能 并 不 只 是 列 出 用 户 需 要 投入 的 明细 。 除 了 价值 声明 之 外 ， 


图 5-5 


TaxSlayer 为 每 


(i 


到 片 配 上 了 一 整 


段 文字 
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这 一 元 素 提供 了 另 一 种 途径 来 表现 应 用 程序 的 用 途 ， 让 访问 者 对 其 产生 更 深入 
的 了 解 。 


“The easiest way to send invoices online”( 最 轻松 的 在 线 发 送 结算 单 的 方 
法 )， 价 值 声 明 告 诉 了 访问 者 这 是 个 什么 网 站 ， 而 投入 成 本 明细 的 6 个 图 表 则 
更 为 具体 。 从 它们 身上 ， 用 户 了 解 到 自己 可 以 选择 单据 模板 、 用 E-mail 发 送 单 
据 、 从 Basecamp “导入 客户 的 联系 信息 、 为 结算 单 设置 标签 ， 以 及 其 他 功能 。 


TaxSlayer.com “的 投入 成 本 明细 则 是 一 个 相反 的 例子 。 它 证 明 在 设计 细节 
E “SREB”, BR HE “BUT”. 


TaxSlayer.com 的 投入 成 本 明细 出 现在 首页 的 最 底部 。 网 站 试图 用 一 些小 图 
片 来 突出 功能 ， 打 消 用 户 的 疑虑 并 吸引 他 们 注册 。 但 是 ，TaxSlayer.com 在 图 片 
旁边 配 上 的 并 不 是 浓缩 后 的 信息 ， 而 是 大 段 的 文字 ， 极 小 的 文字 。 这 些 文字 很 
难 让 人 阅读 ， 如 图 5-5 所 示 。 


Do you dread tax time? 


We'll take you through it ... Step by Step 


not 
of people 
. The great 
com tax 
preparation 
you faster, 
so you can spend more time doing the things that you love. V 


Try It Completely Free! 
We're so confident coasted op oe you'll be 


TaxSlayer.com tax preparation software software is supported by question-specific help and 

that we'd love you to try it out for free. tips. It's just like having a personal tax agent sitting right with you. 
No no contracts — you don't 

pay a dime unii you choose to complete 

the efile tax submission. 


Support from Tax Experts. Maximize Your Refund 
We're not a start-up business who happens to 
of software. 


of returns over the past eleven years. 


O Basecamp 是 一 个 基于 网 页 的 小 型 项 目 管理 和 协作 软件 ， 由 37signals 开发 。 它 提供 了 
消息 板 、 待 办 事宜 、 简 单调 度 、 协 同 写 作 、 文 件 共 享 等 功能 。 产 品 网 址 为 http://www. 
basecamphq.com. 
O TaxSlayer 网 站 上 提供 与 TurboTax 类 似 的 报税 代理 软件 ， 收 费 较 TurboTax 便宜 ， 同 时 为 所 
有 现役 军人 提供 免费 电子 报税 服务 。 


5.4 ”构成 元 素 


整个 网 站 中 本 应 最 有 说 服 力 的 元 素 ， 如 今 变 成 了 惹 人 分 心 ， 让 人 不 愿 理会 
A. 


要 想 投 入 成 本 明细 元 素 产 生 最 大 的 效果 ， 它 就 必须 能 快速 唤起 人 们 感官 与 
心灵 的 响应 。 这 不 是 让 人 心 生 疑虑 的 时 候 。 如 果 “ 少 ”就 是 “多 ”那么 “多 ” 
了 又 会 怎样 ? 


如 果 首页 上 的 小 区 域 里 放 不 下 要 说 的 内 容 ， 可 以 考虑 增加 一 个 “了 解 更 多 ” 
页 面 ， 用 它 展 现 一 些 应 用 程序 的 截图 或 者 视频 ， 对 主要 功能 进行 更 多 的 描述 。 


最 后 要 说 的 是 ， 虽 然 并 不 一 定 非 得 告诉 用 户 注 册 需 要 多 长 时 间 ， 也 不 是 每 
个 框架 都 包含 这 一 元 素 ， 但 它 仍 不 失 为 一 种 明智 之 举 ， 因 此 作为 一 种 最 佳 做 法 
而 推荐 给 大 家 。Blinksale 为 此 在 首页 的 底部 提供 了 一 句 最 简单 的 声明 〈 如 图 5-6 
所 示 ) : "Start sending invoices in about 5 minutes!” (5 分 钟 内 即 可 开始 发 送 您 的 
结算 单 )。 


Sign-up for your free Blinksale account 


对 于 那些 潜在 的 客户 ， 这 表示 即使 他 们 最 终 决定 放弃 这 个 应 用 程序 ， 也 只 
会 浪费 大 约 5 分 钟 的 时 间 而 已 。 在 今天 5 分 钟 也 许 已 经 算是 很 长 的 时 间 了 ， 但 
它 听 上 去 仍然 给 人 感觉 只 是 一 点 很 少 的 投入 。 此 外 ， 很 多 访问 者 会 因为 提前 建 
立 了 清楚 的 预期 (比如 Blinksale 的 这 个 ) 而 感到 更 为 放心 。 


Spinscape 没有 告知 用 户 开 始 使 用 思维 导 图 之 前 需要 花费 多 长 时 间 。 事 实 
上 ， 它 根本 就 没有 提供 任何 投入 成 本 明细 。 
5.43 推荐 语 


社会 心理 学 中 的 “权威 ”和 “相似 ”原则 描述 了 人 类 的 一 种 自然 天 性 ， 
即 倾向 于 相信 受 尊敬 的 权威 人 士 ， 以 及 与 自己 相似 的 人 。 要 想 利 用 这 一 点 ， 
SpinScape 可 以 在 网 站 上 放 一 些 简单 的 推荐 语 (Testimonial) 或 评论 。 表 现 出 产 
品 积极 一 面 的 一 小 段 引用 语 可 以 极为 有 效 地 说 服 浏览 者 们 成 为 你 的 注册 用 户 。 


权威 原则 反映 了 人 类 偏 于 相信 那些 居于 权威 位 置 的 人 的 趋向 。 比 如 ， 如 果 


图 5-6 
Blinksale 向 


时 间 即 可 
使 


告知 , 需要 多 1 


第 5 章 注册 框架 


营销 传奇 Seth Godin "说 了 某 个 产品 的 好 话 ， 某 位 市 场 营销 人 员 可 能 就 会 相信 
它 确 实 值得 一 试 。 如 果 Dont Make Me Think! (New Riders 出 版 社 ) 2 的 作者 
Steve Krug 推荐 了 某 本 书 ， 某 位 可 用 性 领域 的 专业 人 十 可 能 就 会 更 愿意 掏 钱 购 
Lo 


换 句 话说 ， 只 需 在 首页 加 上 一 小 段 来 自 某 位 著名 权威 人 士 的 推荐 语 ， 你 
就 能 得 到 访问 者 的 信任 。 比 如 ，Squidoo.com “就 引用 了 《纽约 时 报 》 的 话语 ， 
说 Squidoo 是 “ 博 主 们 探索 激情 的 家 园 (a home where bloggers can plumb those 
obscure passions)”. 由 于 《纽约 时 报 》 备 受 苯 敬 ， 所 以 人 们 更 容易 对 这 个 网 站 
产生 信任 。 


与 之 类 似 ， 相 似 原则 反映 的 是 人 类 偏 于 相信 那些 与 自己 相似 的 人 的 趋向 。 
在 Amazon.com 上 ， 可 能 仅仅 只 是 因为 某 位 为 商品 写 评论 的 人 的 名 字 是 Joe, 或 
者 他 住 在 Jacksonville”， 他 的 产品 评论 就 能 极 大 地 影响 到 另 一 位 顾客 的 购买 行 
为 。 这 些 个 人 信息 会 使 潜在 的 顾客 联想 到 自身 ， 即 使 这 种 联系 其 实 非常 松散 。 
(事实 上 ， 显 示 评 论 者 的 姓名 和 住址 通常 都 会 比 单独 显示 评论 要 更 有 说 服 力 。) 

对 于 Spinscape 来 说 ， 来 自 男 一 位 设计 师 或 者 开发 人 员 (看 上 去 和 你 相似 的 
人 ) 的 热情 推荐 将 会 有 助 于 说 服用 户 花 上 一 点 时 间 了 解 该 应 用 。 

在 注册 框架 中 ， 如 果 将 推荐 语 、 投 入 成 本 明细 和 其 他 有 说 服 力 的 元 素 搭 配 
使 用 ， 就 能 不 断 增强 用 户 的 信任 感 ， 认 为 这 个 应 用 程序 值得 一 试 。 如 果 只 是 单 
独 运 用 推荐 语 ， 也 许 会 有 同样 的 作用 ， 但 效果 可 能 稍 逊 一 筹 。 

5.44 ”行动 号 召 

你 激 起 用 户 足 够 的 兴趣 以 后 ， 就 可 以 利用 迅速 的 行动 号 召 〈Call To Action) 
来 告诉 他 们 下 一 步 应 该 怎么 做 。 行 动 号 召 这 一 元 素 其 实 只 是 一 个 短 句 ， 措 辞 如 
同 命令 一 样 ， 迫 使 用 户 采 取 行 动 。 


O Seth Godin 是 自 20 世纪 90 年 代 后 期 以 来 一 系列 商业 领域 畅销 专著 的 作者 、 演 讲 家 、 营 销 大 
师 、 互 联网 的 传奇 人 物 、 前 雅虎 营销 副 总 裁 ， 同 时 也 是 许可 式 营 销 (permission marketing) 
概念 的 推广 者 。 他 对 互联 网 有 着 独到 的 见解 ， 其 论文 和 观点 被 广泛 引用 和 参考 。 其 个 人 博 
客 见 http://sethgodin.typepad.com. 

Q Don't Make Me Think 的 中 文 版 名 为 《点 石 成 金 : 访客 至 上 的 网 页 设计 秘笈 》( 机 械 工业 出 版 
社 出 版 )。 该 书 篇 幅 简 短 ， 深 入 浅 出 ， 是 一 本 关于 Web 可 用 性 知识 的 畅销 之 作 。 

@ Squidoo.com 是 一 个 诞生 于 2005 年 的 社交 网 站 ， 用 户 可 以 为 自己 感 兴趣 的 话题 创建 单独 的 
页 面 。Squidoo 是 世界 上 访问 量 最 大 的 500 个 网 站 之 一 ， 也 是 美国 访问 量 最 大 的 300 个 网 站 
Ze 

O Jacksonville GRADA) 是 美国 佛罗里达 州 最 大 的 城市 。 


5.4 ”构成 元 素 


如 果 是 想 劝说 访问 者 成 为 注册 成 员 ， 行 动 号 召 可 以 (而 且 通 常 ) 仅仅 由 3 
个 单词 构成 : 


| 现在 就 注册 ! 


不 过 还 有 另 一 种 更 有 效 的 方式 ， 就 是 暂时 不 要 求 注册 ， 而 让 访问 者 直接 深 
入 。 这 样 能 让 他 们 对 应 用 程序 感 兴趣 ， 从 而 不 断 地 积累 “动能 ”我们 可 以 用 某 
个 行动 号 召 先 激励 用 户 通过 本 程序 做 一 些 具体 的 事情 。 换 句 话说 ， 不 用 立即 注 
册 ， 而 是 考虑 其 他 的 行动 号 召 ， 例 如 ， 现 在 就 创建 你 的 第 一 笔 结 算 单 、 现 在 就 
动笔 写 你 的 第 一 篇 文章 等 。 

简 而 言 之 ， 这 种 做 法 的 意图 就 是 让 访问 者 直接 进行 深入 了 解 。 尽 快 让 他 们 
完成 一 些 事情 。 在 他 们 被 要 求 承诺 之 前 先 四 处 看 一 看 。 这 给 予 访问 者 试用 该 程 
序 的 自由 ,减轻 了 他 们 被 迫 交 出 E-mail 地 址 的 痛苦 ， 从 而 不 会 认为 又 得 在 另 一 
个 网 站 创建 另 一 个 账户 了 。 


TripIt ”首页 的 早期 版 本 就 做 得 很 不 错 ， 如 图 5-7 所 示 。 


How Triplt Works 


Email Triplt your travel plans - 
airline, hotel and more - no matter 
where you booked 


要 使 用 这 个 共享 旅行 线路 的 应 用 程序 ， 用 户 只 需 将 旅行 服务 商 提供 的 行程 
概要 (航班 、 酒 店 等 ) 发送 给 plans@tripit.com， 就 能 得 到 一 份 旅行 线路 的 共享 
样本 。 用 户 想 这 样 做 多 少 次 都 行 ， 只 有 当 他 想 和 其 他 人 分 享 自己 的 旅行 线路 时 ， 
才 会 被 要 求 注册 。 


在 访问 者 着 手 使 用 应 用 程序 之 前 ， 如 果 无 须要 求 他 们 注册 ， 那 么 就 不 要 这 


O TripIt 是 一 个 旅游 线路 和 行程 策划 的 分 享 网 站 ， 帮 助 自 助 旅客 管理 自己 的 旅行 计划 ， 让 旅 
程 更 为 轻松 。 旅 行者 只 需 将 自己 的 购买 确认 电子 邮件 转发 给 TripIt， 网 站 会 自动 创建 主要 线 
路 、 旅 行 计划 及 其 他 重要 信息 。 利 用 TripIt， 旅 行者 可 在 任何 地 方 轻 松 获 取 和 打印 自己 或 其 
他 人 的 旅行 计划 ， 并 在 他 们 的 Triple 网 络 中 与 朋友 分 享 线路 及 旅行 日 程 。 网 站 是 http://www. 
tripit. com. 


图 5-7 
Triplt 描 述 了 如 何 
创建 自己 的 旅行 
线路 
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么 做 。 辟 励 他 们 对 产品 本 身 做 一 些 事情 ， 让 他 们 不 断 深入 ， 而 只 在 必要 时 再 要 
求 他 们 注册 。 这 也 就 是 常 说 的 懒惰 式 注 册 (lazy registration)。 实 际 上 ， 操 作 应 
用 程序 这 一 举动 本 身 就 颇具 说 服 力 : 一 位 已 经 开始 学 习 并 从 中 获 益 的 用 户 自然 
更 愿意 去 注册 ， 而 一 位 已 经 拥有 前 期 经 验 的 注册 用 户 自然 也 会 具备 更 多 责任 感 。 


Spinscape 对 行动 号 召 的 使 用 极为 不 当 ， 它 把 Get Started 放 在 了 首页 的 底 
部 。Get Started 要 么 指向 注册 页 面 ， 要 么 指向 应 用 程序 本 身 ， 但 Spinscape HE 
指向 的 页 面 里 却 只 放 了 几 个 教程 的 链接 。 实 际 上 ， 网 站 根本 没有 清楚 地 告诉 我 
们 应 该 如 何 前 往 注册 表单 。 以 这 种 方式 来 使 用 行动 号 召 ，Spinscape 建立 了 错误 
的 预期 ， 毫 无 意义 地 打破 了 惯例 ， 因 此 没有 得 到 任何 回报 。 似 乎 正 是 这 一 决定 
对 网 站 的 客户 转化 率 产 生 了 负面 影响 。 


另外 要 注意 的 是 ,行动 号 召 不 能 写成 问题 的 形式 ， 而 应 该 是 直接 的 命令 。 
545 ”白板 /即时 参与 


自然 ， 要 想 劝 说 用 户 注册 ， 最 有 说 服 力 的 莫 过 于 一 次 良好 的 用 户 体验 。 因 
此 ， 一 定 要 确保 用 户 的 第 一 步 就 正确 无 误 。 他 们 的 终点 应 该 是 五 星 级 酒店 的 察 
华 客房 ， 而 不 是 悬崖 。 


许多 应 用 程序 都 有 称 为 白板 (blank slate) 的 东西 ， 用 用 户 生成 的 内 容 进 行 
填充 ， 但 它 在 一 开始 却 空空 如 也 ， 让 用 户 摸 不 着 头脑 ， 不 知道 下 一 步 该 做 什么 。 


这 一 元 素 的 初期 目标 是 引导 用 户 找到 每 一 个 他 可 能 遇 到 的 问题 的 答案 。 而 
最 终 ， 它 的 目标 则 是 确保 能 在 任何 时 刻 都 实现 用 户 的 目标 。 


这 里 有 几 个 例子 。 


首先 是 Basecamp， 一 个 基于 网 页 的 项 目 管理 系统 。 它 提供 的 功能 包括 创 
建 消息 和 工作 安排 、 设 置 项 目的 完成 时 间 ， 以 及 与 项 目 中 的 其 他 人 交流 。 当 在 
Basecamp 中 创建 了 一 个 新 项 目 之 后 ， 几 个 主要 的 标签 页 会 提供 简短 的 视频 短 
片 ， 如 图 5-8 所 示 。 


比如 ， 如 果 某 位 用 户 第 一 次 看 到 消息 (Messages) 界面 ， 他 的 目标 是 弄 明 
白 这 个 页 面 是 干什么 的 ， 为 何 重 要 ， 以 及 如 何 使 用 。 而 要 想 回 答 这 3 个 问题 ， 
他 只 需要 点 击 观看 视频 即 可 ， 这 等 于 上 了 一 节 速 成 课 ， 帮 助 用 户 了 解 该 界面 中 
每 一 个 主要 功能 的 价值 和 用 法 。 


如 果 运 气 不 错 ， 这 位 用 户 的 下 一 个 目标 将 是 执行 操作 ， 因 此 在 每 一 个 视频 
的 上 方 都 有 一 个 醒目 的 红色 链接 ， 告 诉 他 如 何 去 做 。 在 一 开始 ， 消 息 标签 页 告 
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Post in share rang ask pum communicate. 
Learn about messages: Watch a video demo below 
You can watch this video or view a screenshot any time from the Messages tour page. 
eoe = Sunrise development > All Messages CN 一 
ee 
All Messages 37signals tje 
Posta new messace 
Categories EN Eas 
Wednesday. 12 Septambe All Messages 
Notes from July 27 walkthrough Assets 
Some points DHH and | discussed. Code 
* Alerts are historical = show them in the stream Cozvwriting 
Completed alerts should show up in the stream. Also, upcoming alerts having to Design 
do with à certain person should be visible on the person/show. That way you 
don't have to go back to check off the alert. Other 
* Setting 
Moved t! 
Cuttered| 
* Person, 
Account holder pages should show entries by them in addition to things about 
them. 
* Permissions 
Some kind of group-based perm needs to come next. "My eyes only" is 
necessary but not helpful for collab due to siloing. 
E Ed | Post a comment 
Design concepts 
I'm working on the add an event Ul and was wondering what you thought of the 
following two options. The Gifferences are subtle but important enough to 
present 
Please post your comments, Thanks * 
-—— — —— — 


诉 这 位 用 户 “ 为 本 项 目 发 布 第 一 条 消息 ” 这 样 一 来 ， 用 户 只 需 点 击 它 就 会 有 所 
收获 。 


如 果 没 有 视频 和 红色 链接 ， 这 位 用 户 可 能 面 对 的 是 一 个 空空 如 也 的 界面 ， 
没有 任何 提示 告诉 他 怎样 开始 。 也 就 是 说 ， 白 板 一 张 。 我 们 的 目标 是 避免 让 白 
板 空白 ， 促 使 用 户 继续 深入 ， 因 此 要 填 人 有 用 的 信息 和 切 和 人口 一 一 也 就 是 有 助 
于 他 们 能 够 即时 参与 的 东西 。 


Basecamp 的 视频 和 红色 链接 让 新 用 户 能 够 在 一 两 分 钟 内 就 熟悉 工具 ， 从 而 
降低 了 门槛 。 


值得 一 提 的 是 Basecamp 要 求 用 户 在 创建 他 们 的 第 一 个 项 目 之 前 必须 先 注 
册 。 而 Adobe 实验 室 ” 的 Photoshop Express“ 则 做 得 更 好 ， 它 在 首页 上 提供 了 一 


(D Adobe 实验 室 (Adobe Labs) 是 Adobe 公司 的 一 个 集群 项 目 ， 让 用 户 体 验 和 评估 Adobe 公 
司 新 的 创意 、 科 技 和 产品 。 网 站 是 http://labs.adobe.com。 

Q Adobe Photoshop Express 是 一 个 基于 Flash 的 在 线 图 片 编辑 应 用 ， 也 可 以 说 是 在 线 的 
Photoshop， 可 以 直接 应 用 于 博客 和 社交 网 站 。 网 址 为 http://www.photoshop.com/express。 


图 5-8 
Basecamp 用 教学 
视频 来 填充 白板 


图 5-9 

Photoshop Express 
让 用 户 无 需 输 入 
个 人 信息 即 可 深 
入 体验 
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个 Test Drive (试用 ) 按钮 。Photoshop Express 没有 要 求 用 户 注册 ， 无 需 任 何 个 
人 信息 即 可 深入 体验 ， 如 图 5-9 所 示 。 


点 击 Test Drive 按钮 后 ， 用 户 便 能 使 用 系统 预先 加 载 的 图 片 进行 试用 ， 以 
此 了 解 到 如 果 自 行 上 传 图 片 后 可 以 做 什么 ， 以 及 程序 能 带 来 的 好 处 。 这 里 没有 
白板 ， 相 反 ， 用 户 能 够 立即 参与 进来 。 本 来 还 在 首页 的 用 户 ， 只 需 不 超过 5 次 
点 击 就 能 动手 编辑 照片 了 。 他 们 随时 可 以 通过 Join Now〔 现 在 加 入 〉 按 钮 进行 
注册 ， 此 外 在 用 户 试 图 使 用 需要 注册 才能 开放 的 功能 时 ， 程 序 自然 也 会 提醒 他 
们 进行 注册 。( 该 网 站 上 的 大 部 分 操作 都 需要 注册 才 可 执行 ， 但 在 要 求 注册 之 
前 ， 用 户 也 可 以 试用 一 些 基本 功能 。) 


要 想 让 用 户 深入 体验 ， 关 键 是 在 他 们 需要 的 时 候 提供 他 们 需要 的 信息 ， 然 
后 解决 问题 。 如 果 用 户 在 此 时 选择 注册 ， 多 半 是 因为 他 们 认为 自己 确实 要 使 用 
这 个 程序 。 


5.4.6 ”注册 表单 


当然 ， 要 想 注册 成 功 ， 用 户 必须 面 对 注 册 框 架 最 后 而 且 最 关键 的 一 部 分 : 
注册 表单 (Registration Fomm)。 遗 做 的 是 ， 只 要 是 表单 ， 用 户 在 填写 时 就 会 出 
现 很 多 问题 ， 注 册 表单 自然 也 不 例外 。 


首先 ， 用 户 可 能 会 犯 一 算 黎 的 错误 。 他 们 会 选择 一 个 已 经 被 使 用 的 用 户 名 ， 
输入 不 匹配 的 密码 ， 跳 过 某 个 必 填 字段 ， 忘 记 勾 选 服务 条 款 的 复 选 枉 ， 或 者 其 
他 各 种 各 样 的 事情 。 

其 次 ， 还 没 下 定 决 心 前 来 注册 的 用 户 可 能 会 被 一 个 兄长 的 注册 表单 所 阻止， 
突然 认为 这 完全 不 值得 他 花费 时 间 和 精力 。 

最 后 ， 有 着 曲折 确认 流程 的 注册 表单 有 时 会 让 用 户 感到 混乱 ， 最 后 导致 用 
户 诅 丧 灰 心 。 比 如 ， 许 多 注册 流程 都 要 求 用 户 查看 自己 的 E-mail 邮箱 ， 寻 找 并 
点 击 一 条 系统 自动 发 送 的 消息 ， 以 此 确定 该 邮箱 地 址 的 合法 性 。 但 如 果 用 户 没 


5.4 ”构成 元 素 


有 发 现 要 去 检查 邮箱 怎么 办 ? 如 果 他 被 一 通电 话 打 断 ， 结 果 忘 记 了 要 去 检查 怎 
么 办 ? 


注册 必须 是 无 痛 的 。 好 不 容易 找到 愿意 来 注册 的 人 ， 结 果 却 在 这 个 重要 时 
刻 让 他 退缩 ， 实 在 是 大 忌 中 的 大 忌 。 

如 果 注 册 流 程 设计 得 好 ， 不 仅 能 增强 用 户 对 应 用 程序 的 信任 ， 还 能 进一步 
巩固 使 用 时 的 承诺 。 

要 想 确 保 顺 利 完成 注册 ， 首 先 请 去 除 注册 表单 中 所 有 非 必 要 的 东西 。 在 绝 
大 多 数 情况 下 ， 所 需要 的 无 非 是 用 户 名 、E-mail 地 址 和 密码 而 已 。 有 时 候 甚 至 
连用 户 名 都 不 是 很 必要 《不 过 在 新 闻 通 讯 等 应 用 中 ， 用 户 名 确实 能 够 提升 个 性 
化 色彩 )。 


比如 ，PearBudget" 就 只 需要 一 个 E-mail 地 址 和 密码 ， 如 图 5-10 所 示 。 


[| | 
Ll] 
SUBSCRIBE 
JUST $3 A MONTH 


30 DAYS 


如 果 你 需要 用 户 在 应 用 中 提供 更 多 的 个 人 资料 ， 不 妨 尽量 推迟 这 一 步 。 先 
让 他 们 注册 ， 之 后 再 要 求 细 节 信 息 。 

尽量 使 表单 短小 精 悍 ， 这 能 降低 应 用 的 门槛 ， 尤 其 是 在 采取 懒惰 式 注册 的 
时 候 ， 用 户 无 须 注册 就 能 使 用 程序 。 

此 外 ， 由 于 每 个 人 都 会 在 《哪怕 是 最 简单 的 ) 表单 中 犯错 误 ， 所 以 请 确保 
在 表单 中 包含 实时 验证 功能 ， 以 便 用 户 在 填写 表单 时 就 能 发 现 并 改正 错误 。 此 
外 请 提供 明确 的 错误 信息 ， 从 而 告诉 用 户 怎 样 做 才 是 正确 的 。 


| 您 的 E-mail 地 址 应 该 是 以 下 形式 : me@mydomain.com. 
令 人 吃惊 的 是 ，( 在 写作 本 书 时 ) 我 们 很 难 找到 Spinscape 的 注册 表单 。 它 


没有 自己 的 独立 页 面 ， 而 是 放 在 了 登录 页 面 的 登录 表单 旁边 。 而 且 也 没有 清晰 
的 路 径 能 来 到 这 个 页 面 ， 网 站 的 入 口 常 常 带领 访问 者 跑 到 出 人 意料 的 地 方 。 


O PearBudget 是 一 个 基于 网 页 的 预算 和 开支 追踪 服务 。 提 供 30 天 的 免费 试用 ， 之 后 则 需要 每 
月 支付 3 美金 。 网 址 为 https:/www.pearbudget.comy/。 


图 5-10 
PearBudget 只 需 
要 E-mail 地 址 和 
密码 
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只 需要 一 些小 小 的 设计 调整 ，Spinscape 就 能 极 大 地 提高 网 站 的 客户 转化 


要 想 深入 了 解 Web 表单 的 设计 ， 该 领域 的 权威 莫 过 于 雅虎 公司 产品 构思 
与 设计 部 门 的 高 级 总 监 Luke Wroblewski。 他 的 著作 ，Rosenfeld 媒体 出 版 社 出 
版 的 Web Form Design: Filling in the Blanks («Web 表单 设计 》) 是 市 面 上 涵盖 内 
容 最 为 全 面 的 资料 。 具 体 到 注册 表单 方面 ， 可 以 阅读 他 的 博客 文章 “Sign-Up 
Form Patterns”, 地 址 是 http://www.lukew.com/ff/entry.asp?702 o 


5.5 设计 标准 
如 你 所 见 ， 本 框架 内 的 绝 大 多 数 元 素 都 只 是 为 了 劝说 而 存在 。 价 值 声明 使 
应 用 程序 看 上 去 实用 性 强 而 且 激 动人 心 ， 投 入 成 本 明细 展示 了 产品 的 功能 亮点 ， 


推荐 语 告诉 用 户 他 们 尊敬 的 人 和 与 他 们 相似 的 人 都 在 热情 推荐 ， 而 行动 号 召 则 
催促 他 们 赶快 深入 。 


仔细 观察 注册 框架 真正 实现 了 什么 ， 我 们 不 难 推断 出 主要 的 设计 标准 ， 以 
得 知 可 能 的 改进 和 替代 方案 。 


5.5.1 传达 明确 的 价值 声明 


首先 ， 如 之 前 已 讨论 过 的 ， 我 们 的 应 用 程序 必须 传达 出 明确 的 价值 声明 。 
不 过 请 务必 理解 ， 价 值 声明 采用 何 种 传达 形式 并 不 重要 ， 重 要 的 是 传达 本 身 。 
实际 上 ， 价 值 声明 元 素 是 根据 它 的 目的 而 得 名 的 ， 与 它 的 设计 无 关 。 换 名 话说， 
尽管 它 常常 表现 为 一 段 文 本 陈述 ， 例 如 时 晓 短 名 或 者 标语 口号 ， 但 其 实 并 不 一 
定 要 如 此 。 


Lean, Hulu.com ”上 几乎 没有 任何 描述 网 站 目的 的 文本 。 它 显示 的 是 一 个 
自动 循环 播放 的 、 介 绍 电视 剧 剧情 梗概 的 约 灯 片 ， 剧 情 梗概 的 劳 边 都 有 一 个 标 
记 为 Watch Now〔 现 在 就 观看 〉 的 简单 按钮 ， 如 图 5-11 所 示 。 哪 怕 是 一 位 从 未 
听 说 过 Hulu.com 的 用 户 ， 在 他 第 一 次 访问 网 站 时 也 能 一 眼 就 推断 出 这 个 网 站 能 
够 在 线 观 看 电视 剧 。 


O Hulu.com 是 一 个 免费 观看 正版 影视 节目 的 网 站 ， 其 名 源 自 中 文 ， 有 “ 宝 葫芦 ”的 寅 意 。 该 
网 站 与 全 美 许多 著名 电视 台 以 及 电影 公司 达成 协议 ， 通 过 授权 点 播 的 形式 向 用 户 提供 视频 
资源 。 内 容 提供 方 包括 福克斯 、NBC、 米 高 梅 公司 、 索 尼 影 业 、 华 纳 兄 弟 等 。 由 于 各 国 对 
版 权 的 法 规 有 差异 ， 其 视频 节目 目前 只 对 美国 本 土 用 户 开放 。 


hulu TV Movies Login 


Bradley Cooper Hosts 


With appearances by Rep. 
Pelosi, Mark Spitz, Bjork, 

Kathie Lee and Hoda, and 
The Lonely Island. 


watch now » 
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图 5-11 
Hulu 通 过 一 个 简单 的 按钮 来 传达 网 站 的 价值 声明 


Allrecipes.com "同样 也 缺少 价值 声明 的 陈述 。 不 过 该 域名 本 身 就 传达 了 网 
站 的 价值 。 


如 果 应 用 程序 只 有 一 个 关注 点 时 ， 这 种 方法 最 为 有 有效， 例如 Flickr 就 是 为 
了 分 享 图 片 ，YouTube 就 是 为 了 分 享 视频 ， 等 等 。 应 用 程序 所 支持 的 主要 行为 
可 以 用 很 多 种 方式 来 传达 ， 绝 不 仅 限 于 使 用 文字 。 


再 次 重申 ， 不 要 只 做 前 人 已 经 做 过 的 事情 。 毫 不 考虑 自己 应 用 程序 的 使 用 
环境 和 目的 ， 而 只 是 照搬 成 功 网 站 的 设计 ， 这 种 做 法 我 们 绝 不 提倡 。 不 妨 研究 
一 下 不 用 文字 传达 价值 声明 的 方法 。 如 果 应 用 程序 聚焦 于 单一 的 行为 ， 那 么 传 
达 这 一 行为 相应 也 会 简单 许多 。 


投入 成 本 明细 元 素 的 一 个 主要 目的 就 是 建立 预期 让 用 户 了 解 在 开始 后 可 
能 会 付出 多 少 努 力 。 要 想 让 用 户 相信 执行 某 些 操 作 后 的 回报 的 确 物 有 所 值 ， 建 
立正 确 的 预期 至 关 重 要 。 


Hu 


O Allrecipes.com 的 域名 直译 为 “所 有 的 菜谱 ”。 用 户 可 以 保存 喜爱 的 菜谱 ， 也 可 发 表 菜谱 、 评 
论 或 交友 。 近 日 网 站 已 推出 了 中 文 版 本 “十 全 菜谱 ”， 网 址 为 http://allrecipes.cn。 


图 5-12 

Senduit 无 需 明 确 
的 投入 成 本 明细 
就 建立 了 预期 
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Senduit.com “没有 使 用 明确 的 投入 成 本 明细 ， 但 同样 极为 有 效 地 建立 了 用 
户 的 预期 ， 如 图 5-12 所 示 。 当 然 ， 它 是 一 个 极为 简单 的 应 用 (只 是 提供 给 用 户 
一 个 临时 的 URL 用 以 共享 文件 )， 但 却 能 够 把 投入 成 本 表达 为 短 短 2 个 步骤， 
总 共 也 才 7 个 单词 。 


senduit 


ED Upload your file 


ED Share your private link 


File: no file selected 
1008 limit 
Expire in: 


Spinscape 如 果 想 建立 用 户 的 预期 ， 可 以 显示 思维 导 图 示例 的 界面 截图 ， 以 
此 来 说 明 思 维 导 图 的 价值 。 


5.5.3 证 明 应 用 程序 运行 良好 


当然 ， 除 了 建立 起 明确 的 预期 之 外 ， 用 户 还 需要 感觉 应 用 程序 可 以 信赖 ， 
因此 我 们 还 需要 做 到 更 多 才能 劝说 他 们 深入 。 要 想 让 用 户 安心 ， 推 荐 语 是 一 种 
非常 有 效 的 方式 ， 不 过 它 也 不 是 唯一 的 方式 。 

Basecamp 利用 了 社会 证 明 (Social Proof) “的 原理 ， 在 网 站 首页 上 提出 了 
以 下 这 段 陈 述 : 
| 数 百 万 人 都 深信 ，Basecamp 是 当今 最 好 的 基于 网 页 的 项 目 合作 工具 。 

数 百 万 人 都 深信 ! 

这 上 段 陈 述 使 用 户 相 信 (至 少 是 在 潜意识 里 )， 既 然 有 数 百 万 用 户 都 相信 它 ， 


那么 这 些 人 里 面 肯 定 有 和 自己 相似 的 人 〈 身 处 同样 的 环境 ， 有 着 相似 的 需求 )， 
而 且 肯 定 有 自己 尊敬 、 钦 佩 或 信任 的 人 ， 因 此 它 肯 定 是 个 不 赖 的 应 用 程序 。 


® Senduit.com 是 一 个 简单 的 免费 网 络 硬盘 。 用 户 无 需 注册 ， 可 上 传 100MB 内 的 单个 文件 ， 并 
选择 文件 的 存储 期 限 〈 从 30 分 钟 到 一 周 )。 上 传 成 功 后 网 站 会 提供 一 段 URL， 用 来 和 其 他 

人 共享 和 下 载 文件 。 

D 社会 证 明 是 当 人 们 身 处 于 模棱两可 的 社会 环境 ， 无 法 决定 合适 的 行为 模式 时 产生 的 一 种 心 

理 现 象 。 人 在 此 时 会 假设 周围 的 人 比 自己 更 为 了 解 环 境 ， 从 而 相信 其 他 人 的 举动 才 是 合适 的 。 


5.5 设计 标准 


此 外 ， 让 用 户 在 注册 之 前 先 试用 本 程序 (也 就 是 提供 一 种 即时 参与 的 途 
径 )， 他 们 就 能 亲眼 看 到 它 顺 利 运 行 (当然 ， 前 提 是 这 个 程序 确实 能 够 顺利 运 
行 )。 在 这 里 无 需 任何 专门 的 设计 元 素 。 


5.5.4 鼓励 操作 并 确保 取得 进展 


Hulu 的 Watch Now 按钮 是 个 可 点 击 的 行动 号 召 ， 由 假 3D 按钮 图 形 上 面 的 
2 个 单词 组 成 。 没 有 比 它 更 简单 的 了 ， 也 没有 比 它 更 有 效 的 了 。 


行动 号 召 通常 都 是 一 个 按钮 ， 至 少 被 安置 在 按钮 旁边 。 不 过 ， 除 了 按 
钮 上 的 文学 标签 之 外 ， 让 这 一 解决 方案 更 富 魅 力 的 还 有 按钮 的 界面 隐喻 Caf- 
fordance， 或 称 功 能 可 见 性 ， 是 一 种 能 够 暗示 对 象 应 如 何 使 用 的 设计 特性 ) : 通 
过 模拟 3D 的 外 观 、 投 影 和 渐变 使 它 看 上 去 可 以 触摸 和 点 击 。 


在 很 多 类 似 My Yahoo 这 样 的 用 户 可 定制 的 起 始 页 上 ， 用 户 可 以 拖 搜 各 种 
模块 来 对 页 面 内 容 进 行 组 织 和 排列 。 比 如 ， 在 iGoogle” 上， 鼠标 移动 到 某 个 模 
块 的 标题 栏 上 时 ， 会 显示 移动 光标 小 图 标 ， 表 示 该 模块 可 以 拖 动 。 正 是 这 种 设 
计 细 节 告 诉 用 户 可 以 做 什么 ， 以 及 怎么 做 。 而 在 起 始 页 这 种 环境 中 运用 界面 隐 
喻 ， 就 能 促使 用 户 着 手 定制 自己 的 页 面 。 你 可 以 在 一 开始 就 以 同样 的 方式 将 界 
面 隐喻 运用 到 自己 的 应 用 程序 上 。 


不 过 ， 除 了 鼓励 用 户 执行 操作 之 外 ， 更 重要 的 是 让 他 们 能 够 执行 有 效果 的 
操作 。 注 册 这 种 行为 只 是 一 个 门槛 一 一 它 不 属于 应 用 程序 的 使 用 过 程 ， 也 无 法 
带 给 用 户 实际 的 结果 。 它 并 不 能 帮助 他 们 看 到 应 用 程序 的 价值 。 因 此 可 以 考虑 
应 用 即时 参与 ， 在 要 求 用 户 提 交 个 人 信息 之 前 ， 先 允许 他 们 使 用 程序 。 


5.5.5 ”让 用 户 和 他 们 的 操作 相 联 系 
也 许 你 已 经 注意 到 ， 我 们 在 本 章 所 举 的 例子 都 不 是 那 种 没有 注册 框架 就 
不 行 的 应 用 程序 一 一 它们 都 不 是 那 种 必须 注册 才能 创建 或 使 用 数据 的 “围墙 花 
bd". 坦白 地 说 ， 这 是 因为 并 不 是 每 一 个 要 求 注册 的 应 用 程序 都 真正 需要 这 样 做 。 
注册 表单 要 求 用 户 提交 他 的 姓名 、E-mail 地 址 以 及 其 他 信息 ， 以 创建 一 个 


唯一 的 数据 库 入 口 ， 从 而 将 用 户 和 他 的 操作 以 及 内 容 相 联系 。 但 并 不 是 必须 这 
么 做 。 


O iGoogle 是 Google 提供 的 一 项 服务 ， 让 用 户 按 照 个 人 的 喜好 方便 地 定制 和 收集 不 同 来 源 的 信 
息 ， 使 之 成 为 个 性 化 的 页 面 。 用 户 可 以 “一 站 式 访问 ”页 面 中 聚合 的 各 种 信息 来 源 并 使 用 
日 历 、 天 气 、 邮 件 等 小 应 用 。 网 址 为 http://igoogle.com。 
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Drop.io”， 另 一 个 文件 共享 的 应 用 ， 就 握 弃 了 注册 的 要 求 ， 但 仍然 提供 了 
各 种 功能 以 便 用 户 管理 文件 ， 如 图 5-13 所 示 。 要 想 创建 一 个 存储 区 域 以 便 文件 
共享 ， 只 需 在 URL 中 选择 一 个 关键 词 (drop.io/keyword) 即 可 。 不 需要 E-mail 
地 址 ， 如 果 共 享 文件 需要 保护 ， 也 可 以 创建 一 个 密码 ， 但 不 是 必须 如 此 。 


图 5-13 
Drop. iof E OÈ 


F e 
册 的 要 求 dro p. lO The simplest way to share online. 


Use drop.io to create drops and privately share your files by web, email, phone, fax, and 
more. Drops are protected from search engines so you can conveniently share what you 
want, how you want, with whom you want. Check out our 'How To' video. 


Drop name (7+ characters) 


 drop.io / webanatomyframeworks 


Purchase Code 


Add Files ( ) 
100MB available. 


Follow us on Twitter. 


[+] Additional Settings (password, permissions, expiration) 


You agree to the drop.io 
Privacy Policy & Terms of Use 


而 第 一 次 使 用 TripIt 时 ， 你 也 只 需要 转发 一 封 旅程 确认 的 E-mail， 就 能 
顺利 收 到 TripIt 生成 的 旅行 线路 样本 。 以 此 想法 为 基础 ， 应 用 程序 可 以 用 这 个 
E-mail 地 址 自动 创建 一 个 账户 (也 许 还 包括 一 个 密码 )， 以 便 用 户 日 后 能 再 次 登 
Ko E-mail 地 址 完全 可 以 作为 独立 的 数据 库 标识 符 ， 而 要 想 保 护 账户 ， 一 个 密 
码 自然 也 就 足够 了 。 因 此 应 用 程序 完全 可 以 只 要 求 这 两 样 信息 ， 日 后 再 要 求人 
们 提供 更 多 信息 。 这 样 的 流程 在 一 开始 就 降低 了 投入 ， 同 时 还 能 逐步 提升 用 户 
对 于 应 用 程序 的 承诺 。( 人 们 倾向 于 和 自己 的 早期 行为 保持 一 致 ， 因 此 在 理论 
上 ， 用 户 构建 个 人 资料 时 执行 的 操作 越 多 、 留 下 的 脚印 越 多 ， 他 们 就 越 可 能 会 
对 这 个 网 站 “忠心 耿耿” ) 


在 探索 应 用 程序 的 设计 时 ， 有 一 个 很 少 涉及 的 方向 : 如 何以 非 标 准 的 方式 
将 用 户 和 他 的 操作 联系 起 来 。 请 自问 ， 我 们 能 否 用 表单 之 外 的 什么 方式 ? 我们 


® Drop.io 是 一 个 私人 文件 共享 服务 ， 用 户 可 通过 网 页 、 电 子 邮 件 、 电 话 、 手 机 或 其 他 工具 与 
别人 即时 共享 文件 并 合作 。 中 文 版 本 网 址 为 http://cn.drop.io。 


5.5 设计 标准 


是 否 真 的 需要 那么 多 信息 才能 为 用 户 创建 数据 库 人 口 ? 将 用 户 和 他 的 数据 相 联 
系 的 过 程 是 否 真 的 必须 独立 在 核心 任务 流程 之 外 ? 我 们 能 否 更 有 机 地 组 织 这 一 
Whe? 

如 果 可 以 在 用 户 使 用 程序 的 过 程 中 逐步 向 他 们 索要 资料 信息 ， 而 不 是 硬 塞 
给 他 们 一 个 单独 的 ， 与 程序 其 实 并 无 关联 的 流程 (比如 注册 表单 )， 我 们 就 能 减 
少 用 户 的 初期 投入 。 如 果 能 够 这 样 ， 用 户 就 不 再 需要 决定 是 否 注册 一 一 当 他 们 
在 网 站 上 执行 操作 时 ， 实 际 上 就 已 经 “注册 ”了 。 

对 于 那些 必须 注册 的 网 站 ， 本 框架 中 的 大 部 分 元 素 都 很 重要 。 最 起 码 应 该 
包含 的 是 价值 声明 、 行 动 号 召 、 注 册 表单 ， 以 及 至 少 一 个 其 他 元 素 。 

不 过 ， 如 果 系 统 被 设计 成 不 用 明确 的 注册 流程 即 可 创建 账户 ， 那 么 不 需要 
注册 框架 的 最 后 一 个 元 素 〈 也 就 是 注册 表单 ) 也 能 实现 客户 转化 的 目标 。 这 样 
一 来 ， 注 册 也 能 变 成 一 种 自然 、 有 机 的 过 程 ， 在 用 户 使 用 时 就 能 达到 效果 。 

设想 一 下 吧 。 

没有 注册 表单 的 互联 网 。 


AT RAN 


= RM ARASH, RUT ie Sib AA ESOL ABR AE 

-这些 人 中 的 一 个 ， 或 者 尽管 你 对 这 个 网 站 很 熟悉 ， 但 你 想 知 道 这 个 公司 的 
发 展 历史 ， 它 对 未 来 几 年 的 规划 以 及 是 否 参 与 了 慈 善 活 动 。 如 果 是 这 样 ， 你 应 
该 寻找 一 个 标记 为 About Us 的 链接 ， 或 者 类 似 的 东西 。 


在 Amazon.com 上 ， 你 找 不 到 。 


这 个 网 站 提供 了 亚马逊 公司 的 财务 信息 、 实 事 新 闻 、 公 司 治理 、 联 系 方法 ， 
等 等 ， 但 要 想 了 解 有 关公 司 的 背景 、 文 化 、 使 命 等 方面 ， 就 不 得 不 自己 花心 思 
了 。 事 实 上 ， 这 些 内 容 是 存在 的 ， 但 却 是 在 Careers GEIB) 页 面 中 ， 所 以 你 可 
能 只 在 求职 的 时 候 才 能 看 到 。 而 且 颇 为 奇怪 的 是 ， 在 维基 百科 上 有 关 亚 马 逊 的 
信息 反而 比 该 公司 自己 网 站 里 提供 的 信息 要 丰富 得 多 。 


如 有 果 没 有 这 些 信息 ， 你 会 信任 这 个 网 站 吗 ? 你 能 肯定 它 信 誉 较 好 ， 订 单 都 
会 顺利 到 达 吗 ?你 能 放心 地 把 自己 的 信用 卡 信息 透露 给 这 个 公司 吗 ? 


记录 如 此 明显 、 常 见 的 东西 似乎 看 上 去 显得 微不足道 ， 但 “关于 我 们 ” 框 
架 其 实 表现 出 了 设计 模式 和 框架 体系 之 外 的 价值 。 虽 然 在 绝 大 多 数 网 站 上 都 能 
找到 “关于 我 们 ”， 却 没有 任何 模式 资源 库 对 它 进 行 过 存档 备案 。 因 此 我 们 有 几 
个 重要 的 问题 需要 自问 ; 


6.2 上下文 情境 115 


这 一 框架 需要 包含 哪些 信息 ? 
是 什么 让 这 些 信息 如 此 重要 ? 
它 满足 了 用 户 的 哪些 需求 ? 
这 些 内 容 会 被 用 在 哪里 ? 怎样 使 用 ? 


和 其 他 框架 一 样 ,“ 关 于 我 们 ”有 着 它 自身 的 具体 目标 ， 而 且 其 中 看 似乎 常 
的 内 容 也 和 其 他 框架 一 样 有 着 极 大 的 创新 空间 。 理 解 这 些 目标 绝对 有 利于 改进 
本 框架 ， 从 而 为 你 的 公司 或 组 织 发 挥 更 大 的 作用 。. 


6.1 描述 


“关于 我 们 ”通常 并 不 表示 字面 意义 上 的 关于 我 们 一 一 该 框架 同样 也 适用 于 
个 人 。 实际 上 ， 几 乎 所 有 类 型 的 网 站 上 都 能 看 到 各 种 形式 的 “关于 我 们 ” AA 
司 网 站 到 “围墙 ”中 的 Web 应 用 ， 从 大 型 零售 网 站 到 业余 爱好 者 的 博客 ， 莫 不 
如 此 。 如 果 某 人 有 任何 话 想 说 ， 并 放 到 了 网 上 ， 那 么 就 是 “关于 我 们 ”。 它 能 帮 
助 访问 者 了 解 更 多 ， 并 开始 信任 这 个 网 站 。 


和 本 书 中 的 所 有 其 他 框架 一 样 ， 我 们 在 一 开始 将 了 解 什么 是 “关于 我 们 ”， 
目前 它 能 做 什么 ， 之 后 将 介绍 其 中 的 设计 标准 ， 然 后 再 分 析 是 否 能 用 不 同 的 方 
法 来 实现 该 框架 的 目标 。 


如 前 所 述 ,“ 关 于 我 们 ”能 够 建立 起 访问 者 对 网 站 的 信任 。 不 过 ， 建 立信 任 
主要 并 不 是 靠 它 来 实现 一 一 这 一 目标 最 好 留 给 网 站 的 其 他 部 分 来 实现 。 一 个 零 
售 公司 的 购物 体验 、 发 货 速 度 、 客 户 服务 质量 等 方面 对 用 户 信 任 度 的 影响 ， 要 
比 “ 关 于 我 们 ”大 得 多 。 但 是 ,“ 关 于 我 们 ”有 助 于 建立 有 关 网 站 效能 和 可 靠 性 
的 第 一 感觉 ， 而 且 让 用 户 了 解 到 在 网 站 的 背后 有 一 个 真实 的 公司 或 个 体 。 它 为 
不 人 性 化 的 网 站 加 入 了 人 性 化 的 成 分 。 为 了 达到 这 一 目的 ， 该 框架 值得 我 们 仔 
细 详 察 ， 以 便 从 新 颖 的 创意 中 获 益 。 


6.2 上下文 情境 


用 户 们 往往 在 他 们 希望 深入 了 解 某 网 站 时 会 查看 “关于 我 们 ” 这 通常 发 生 
在 前 几 次 访问 中 。 如 果 用 户 出 于 个 人 原因 希望 联系 该 公司 《或 组 织 )， 他 们 也 会 
查看 它 ， 然 后 电话 联系 或 者 亲自 造访 ， 以 寻求 客户 支持 、 说 明和 指导 ， 或 者 只 
是 问 个 问题 。( 而 这 可 能 会 发 生 在 用 户 与 网 站 建立 联系 之 后 的 任何 时 刻 。) 
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6.3 ”任务 流程 


用 户 通常 会 通过 网 站 的 持久 导航 或 全 局 导航 进入 “关于 我 们 ”一般 能 在 

页 首 区 域 找到 它 ， 比 如 “登录 /退出 ”选项 和 “我 的 账户 ”链接 的 旁边 ， 附 近 

也 许 还 有 “帮助 “网 站 地 图 ”和 “功能 ”等 链接 。 或 者 也 可 能 在 页 面 的 底部 ， 

其 他 持久 链接 旁边 找到 它 。 比 如 ， 有 些 品 牌 网 站 ， 例 如 Best Buy fll Macy's, Wè 
把 它们 的 关于 我 们 入 口 放 在 了 页 面 模板 的 底部 。 


“关于 我 们 ”可 以 是 单个 页 面 ， 只 包含 顶级 信息 ， 也 可 以 是 多 个 页 面 。 比 如 
n 了 多 个 子 页 面 ， 涵 盖 了 从 公司 概况 到 财务 状 
速 览 等 一 系列 信息 U^? 如 图 6- 1 所 示 。 
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图 6-1 


XE HAS 


我 们 一 栏 中 包含 了 多 个 子 部 分 . 作为 一 家 极其 重视 信誉 的 公司 , 这 不 失 为 明智 之 举 


不 管 怎样 ,“ 关 于 我 们 ”通常 都 位 于 网 站 结构 的 顶级 营销 部 分 ， 以 便 用 户 在 
初次 访问 网 站 时 即 可 快速 得 到 相关 的 信息 《不 管 他 们 是 因为 想 了 解 网 站 的 所 有 
者 ， 还 是 需要 得 到 该 所 有 者 的 更 多 信息 ) 


(D 美 林 证 券 (Merrill Lynch) 是 世界 最 大 的 证 券 零售 商 和 投资 银行 之 一 ， 为 世界 超过 40 个 国 
家 的 个 人 、 机 构 投资 者 和 政府 客户 提供 多 元 化 的 金融 服务 。 网 站 是 http:/www.mlcom。 


6.4 构成 元 素 


不 管 其 位 于 何 处 ， 用 户 只 需 点 击 关于 我 们 链接 〈 也 许 是 类 似 的 名 称 ， 例 如 
“关于 ”或 者 “关于 [公司 的 名 称 ]”) 即 可 访问 关于 我 们 页 面 。 


6.4 构成 元 素 
以 下 是 关于 我 们 框架 所 包含 的 构成 元 素 。 
6.4.1 公司 背景 


“关于 我 们 ”页 面 通常 都 会 包含 该 公司 或 个 人 背后 的 故事 一 一 它 有 助 于 形成 
用 户 对 个 人 或 者 组 织 的 感受 和 看 法 。 


大 多 数 “关于 我 们 ”在 一 开始 都 会 提供 公司 的 概述 ， 或 者 网 站 所 有 者 的 个 
人 资料 ， 这 部 分 内 容 用 词 友好 ， 便 于 媒体 摘 选 ， 同 时 又 涵盖 全 面 、 简 单 明了 ， 
以 便 该 公司 或 个 人 能 赢得 注意 。 


比如 ， 假 设 你 要 买 一 个 数字 节拍 器 ”， 和 希望 附带 有 耳机 插 孔 ， 而 且 在 重 拍 
时 要 有 不 同 的 音色 。 你 的 朋友 向 你 推荐 了 一 个 网 站 。 你 从 没 听 说 过 这 个 网 站 ， 
也 不 知道 运营 它 的 公司 ， 而 在 访问 该 网 站 时 ， 你 发 现 想 要 的 那 款 节拍 器 确实 有 
售 。 但 是 你 并 不 知道 是 否 应 该 相信 这 家 公司 ， 因 为 购买 时 需要 提供 自己 的 信用 
卡 信息 ， 而 且 你 也 不 知道 下 订单 和 发 货 的 流程 是 否 能 满足 自己 的 要 求 。 


为 了 了 解 更 多 ， 你 点 击 进入 了 “关于 我 们 ”页 面 。 在 那里 你 发 现 ， 这 个 网 
站 属于 一 家 位 于 马萨诸塞 州 波士顿 的 私营 零售 店 。 根 据 公司 概述 ， 这 家 店 成 立 
于 1976 年 ， 所 有 人 是 Chelsea Craig 和 Brian Craig， 出 售 各 种 乐器 和 歌集 ， 开 办 
音乐 辅导 课程 ， 同 时 还 向 附近 一 所 高 中 捐赠 了 音乐 器 材 。 这 个 页 面 还 提供 了 零 
售 店 的 实际 地 址 和 电话 号 码 ， 可 以 直接 和 店员 通话 。 


这 个 时 候 ， 你 也 许 感 觉 还 需要 在 Yelp.com ”或 者 其 他 网 站 上 找 找 有 关 该 店 
铺 的 讨论 ， 但 作为 一 个 事 事 都 先 往 好 处 想 的 人 ， 你 认为 这 段 描 述 已 经 颇 为 可 信 
了 ， 并 决定 给 该 店铺 一 个 机 会 。 毕 竞 ， 下 周一 你 就 得 拿 到 这 个 节拍 器 ， 以 便 上 
课时 能 够 巩固 学 生 们 的 节奏 感 。 


有 了 零售 店 的 历史 背景 、 网 站 提供 的 保证 24 小 时 内 发 货 以 及 如 果 加 急 送 货 
只 收取 少量 额外 送 货 费 的 信息 ， 你 已 经 足够 满意 了 ， 于 是 把 节拍 器 加 入 到 购物 


(D 节拍 器 是 一 种 能 规律 地 发 出 声音 的 器 材 ， 提 供 一 个 稳定 的 节拍 和 速度 ， 以 便 音 乐 家 练习 。 
O Yelp.com 是 一 个 提供 本 地 搜索 、 用 户 评论 的 社交 网 站 。 每 月 访问 量 超过 2 500 万 ， 位 列 美国 
网 站 前 100 名 。 
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车 并 完成 了 购买 。 


再 假设 一 种 不 同 的 情况 ， 即 网 站 没有 提供 历史 背景 ， 没 有 地 址 和 电话 ， 也 
没有 向 高 中 捐赠 音乐 器 材 。 


如 果 是 这 种 情况 ， 你 会 怎样 判断 这 个 网 站 的 可 信和 度 ? 也 许 你 会 到 Yelp 上 去 
看 看 。 也 许 你 会 到 Google 搜索 这 个 店铺 的 名 字 ， 看 是 否 有 人 曾 在 哪里 评论 过 
它 。 也 许 你 会 到 Facebook 上 发 布 一 条 消息 ， 看 你 那些 教 音乐 的 朋友 当中 是 否 有 
人 曾 在 该 网 站 购买 过 什么 东西 。 


而 更 可 能 的 是 ， 你 认为 这 样 做 并 不 值得 ， 于 是 到 Google 上 搜索 这 个 节拍 需 
的 名 字 和 型 号 ， 因 为 你 在 第 一 个 网 站 上 看 到 过 它 ， 已 经 掌握 了 这 些 信息 。 


“关于 我 们 ”提供 了 一 种 捷径 。 我 们 因为 相信 它 里 面 说 的 内 容 而 开始 相信 这 
个 公司 ， 而 不 是 在 网 上 到 处 搜寻 相关 的 信息 。 因 为 它 捐助 了 当地 高 中 这 一 事实 ， 
让 我 们 对 它 产生 了 好 感 ， 并 因此 而 认定 这 家 店铺 肯定 值得 信任 ， 而 不 会 去 寻找 
第 二 选择 。 一 个 组 织 周 详 的 概述 可 以 事半功倍 。 故 事 越 有 说 服 力 ， 我 们 就 越 有 
可 能 被 说 服 。 

但 是 公司 背景 往往 并 不 只 是 一 段 简短 的 概述 那么 简单 。 比 如 ， 通 过 那些 名 
牌 网 站 的 “关于 我 们 ” 人 们 可 以 了 解 到 一 个 公司 的 经 营 信条 、 商 业 目 标 、 发 展 
历史 等 多 方面 的 内 容 ， 而 这 可 能 要 使 用 多 个 页 面 。 


HEA Target.com 的 Our History (发 展 历史 ) 一 栏 〈 该 网 站 About Target 的 
一 个 子 部 分 ) 以 后 ， 会 发 现 它 使 用 多 个 页 面 来 讲述 Target 如 何 变 成 Target， 如 
何在 零售 界 独树一帜 ， 以 及 它 积极 参与 社区 活动 的 传统 是 如 何 形 成 的 ， 如 图 6-2 
所 示 。 


About Target 一 栏 包括 的 子 部 分 有 : 公司 使 命 、 社 区 推广 、 肾 焦 设 计 、 实 体 
店铺 、 企 业 文化 、 环 保 措 施 、 奖 励 奖项 、 企 业 责 任 以 及 公司 股东 。 而 每 一 个 子 
部 分 又 分 别 扩展 为 多 个 页 面 。Target 的 公司 背景 和 企业 责任 部 分 已 经 庞大 到 需 
要 至 少 几 十 个 页 面 才能 描述 清楚 。 


6.4. ”财务 状况 


请 注意 在 Target 的 关于 部 分 中 还 有 一 个 叫做 Investors 〈 投 资 者 ) 的 子 部 分 ， 
面向 的 是 那些 与 公司 的 财务 稳定 性 和 未 来 收益 有 利害 关系 的 人 。 通 常 只 有 上 市 
公司 才 有 这 个 部 分 ， 因 为 在 网 站 上 需要 公布 公司 的 财务 信息 ， 不 过 有 些 积极 寻 
求 资金 的 私人 公司 或 组 织 的 网 站 上 也 会 有 这 一 内 容 。 
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Target in the Community 


Giving to the community is a Target tradition that 
reaches back to the very beginning. As our 
business has grown, so have the new and 
innovative ways we've contributed to good 
causes. 


More about our history in the community » 


Revolutionizing Retail 


The guest always comes first. Our ideas about 
making shopping easy and enjoyable include 
great store design, exciting brand offerings and 
discounted prices 


More about our store experience » 


Design for All? 


It isn't just high-end, and it doesn't have to cost a 
lot. At Target, great design is about a fun 
shopping environment and products that are 
smart, stylish and affordable. 


More about reducing our focus on design » 


The Target Timeline 


TE We have more than 60 years of experience in 
building a top national retail brand, with many 


exciting developments along the way. 


Explore the timeline » 
Download a pdf version of the timeline (476 kb) » 


Our Mission: 


To make Target the preferred 
shopping destination for our guests 
by delivering outstanding value, 
continuous innovation and an 
exceptional guest experience, and 
consistently fulfilling our Expect 
More. Pay Less.® brand promise. 


Team Member Services ^ Visit Partners Online 


图 6-2 
Ke 


Target 的 公司 背景 包括 一 人 


a 


户 为 导向 的 宗旨 和 公司 历史 , 同时 还 


Lu 


改进 购物 体验 以 及 如 何 将 时 


点 放 在 设计 上 的 信息 


Target 如 何 


o 


馈 附 近 的 社区 , 如 何 


TimeWarner.com "的 Investor Relations (投资 者 关系 ) 一 栏 就 是 上 市 公司 财 
务 状况 部 分 的 一 个 例子 ， 如 图 6-3 所 示 。 


O TimeWarner.com 是 时 代 华 纳 公 司 (Time Warner Inc.)〉 的 网 站 。 时 代 华 纳 是 美国 的 一 家 大 型 


媒体 公司 ， 由 美国 在 线 〈 美 国 当 时 最 大 的 因特网 服务 提供 商 ) 与 原先 的 时 代 华 纳 (一 家 传 


统 的 媒体 巨 擎 ， 横 跨 出 版 、 电 影 与 电视 产业 ) 于 2000 年 合并 而 成 。 最 初 名 为 美国 


华纳 。 


在 线 时 代 
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torch 2 
y 
eux ABOUT US | MANAGEMENT | CORPORATE GOVERNANCE | CITIZENSHIP | BUSINESSES NEWSROOM | CAREERS 
RS 
" INVESTOR RELATIONS 
E REPORTS & SEC FILINGS id Printer-Friendly Page| 
全 相同 TIME WARNER INC. - TIME 
= INFORMATION SEPARATION Reports & SEC Filings Events & Presentations 


STOCK & DEBT SECURITIES Financial publications, earnings information and Information about events and presentations by 
INFORMATION SEC filings, including Annual Reports; 10-K, 10- senior management 
EVENTS & PRESENTATIONS Q and 8-K reports; proxy statements; and other 


similar public filings 
inFOCUS INVESTOR 
NEWSLETTER 
Time Warner Inc. - Time Warner Cable inFOCUS Investor Newsletter 


SHAREHOLDER SERVICES Separation Information 
CORPORATE GOVERNANCE - inFOCUS, Time Warner Inc.'s quarterly Investor 
e Newsletter 

Stock & Debt Securities Information Shareholder Services 


Stock price, dividend and stock split information Answers to frequently asked questions and 
and listing of outstanding public debt securities contact information, order investor materials, 
sign up for email alerts and electronic delivery 


单 靠 这 个 界面 截图 很 难说 明 财 务 一 栏 的 涵盖 范围 ， 也 很 难 表现 出 它 的 错 综 
复杂 ， 不 过 我 们 能 从 中 看 出 它 大 概 会 包含 哪些 类 型 的 信息 。 如 你 所 见 ， 时 代 华 
纳 的 Investor Relations 〈 投 资 者 关系 ) 一 栏 提供 的 子 部 分 包括 : Reports GR) 
Fil SEC ° Filings (SEC 报告 )、Stock〔( 股 票 ) 和 Debt Securities Information ( fii 
券 信 息 )、Events and Presentations 〈 事 件 及 报告 )、Shareholders Services (股东 
服务 ) 和 Corporate Governance 〈 公 司 治 理 ) 等 。 


在 财务 部 分 里 显示 什么 、 不 显示 什么 ， 这 一 抉择 过 程 非常 复杂 ， 我 们 曾 考 
上 处 把 它 单独 作为 一 个 框架 体系 来 表示 ， 但 最 后 决定 还 是 为 大 家 省 去 这 些 残 酷 的 
细节 。 不 过 值得 注意 的 是 ， 财 务 部 分 同样 能 够 建立 起 信任 感 。 考 虑 买 人 某 公 司 
股票 的 人 、 论 大 价钱 购买 某 项 服务 的 人 ， 甚 至 是 想 订 个 数字 节拍 峰 的 人 都 能 
过 一 个 网 站 的 财务 信息 来 判断 该 公司 或 组 织 ) 的 可 信 度 。 


比如 ， 如 果 想 为 某 个 新 楼 盘 投 资 ， 你 只 有 一 次 机 会 ， 所 以 找到 好 的 承包 公 
司 和 建造 商 至 关 重 要 。 湾 在 的 客户 会 寻找 尽 可 能 多 的 有 用 信息 ， 使 成 功 的 几率 
最 大 化 。 而 公司 的 财务 状况 有 助 于 打消 人 们 的 顾虑 ， 使 大 家 相信 它 在 财政 上 的 
可 行 性 ， 以 及 足够 完成 项 目的 生存 能 


在 第 7 音 有 一 个 涉及 特定 主题 的 框架 实例 ， 说 明了 如 何在 你 自己 的 领域 或 
公司 内 部 对 框架 体系 进行 标识 “关于 我 们 ”中 的 财务 状况 就 是 这 样 一 种 框架 。 
如 果 你 在 为 一 家 上 市 公司 工作 ， 可 以 查看 公司 网 站 上 的 财务 一 栏 ， 标 识 出 那些 


® SEC 全 称 为 Securities and Exchange Commission ， 即 (美国 ) 证 券 交 易 委员 会 。 


6.4 构成 元 素 


与 其 他 上 市 公司 共有 的 元 素 ， 再 找 出 不 同 之 处 及 其 原因 ， 然 后 再 看 看 这 些 元 素 
都 满足 了 哪些 用 户 需 求 。 只 要 理解 了 这 一 部 分 的 目的 和 作用 ， 你 就 有 可 能 想 出 
更 为 有 效 的 办 法 来 传达 相关 的 信息 ， 同 时 更 好 地 建立 起 股东 们 的 信任 。 


6.4.3 客户 名 录 


诸如 咨询 公司 或 供应 商 这 样 的 服务 性 公司 通常 都 会 提供 一 份 客户 名 录 
(Client List)。 客 户 名 录 并 不 一 定 隶 属于 “关于 我 们 ”( 有 时 它 自 成 一 体 )， 但 我 
们 认为 这 一 信息 仍然 应 该 被 划分 到 “关于 我 们 ”框架 内 。 


使 用 客户 名 录 完 全 就 是 为 了 建立 信任 。 展 示 这 一 信息 没有 其 他 的 目的 ， 就 
是 要 让 潜在 的 客户 相信 你 能 够 (而 且 已 经 ) 为 那些 信誉 良好 的 公司 提供 过 很 好 
的 服务 。 列 出 的 客户 可 以 用 于 参考 ， 而 展示 的 推荐 语 可 以 作为 对 供应 商工 作 质 
量 的 认可 。 一 份 好 的 客户 名 录 甚 至 能 够 展现 公司 价值 ， 打 动 投资 者 。 


很 多 客户 名 录 都 是 如 此 简单 ， 就 是 单纯 的 一 系列 客户 的 名 字 。 不 过 ， 如 果 
名 录 中 包含 能 证 明 工 作 结果 的 链接 ， 其 说 服 力 会 大 得 多 。 比 如 ， 一 个 网 页 设计 
公司 的 客户 名 录 可 以 直接 指向 该 公司 设计 过 的 网 站 或 Web 应 用 ， 这 远 比 简单 的 
一 串 公 司 名 称 要 有 说 服 力 得 多 。 这 种 方式 能 让 网 站 的 访问 者 直接 观摩 该 公司 的 
作品 ， 并 自行 判断 其 设计 水 平 。 

Happy Cog Studios， 我 们 最 喜爱 的 设计 公司 之 一 ， 提 供 了 男 一 种 极 好 的 方 
案 ， 如 图 6-4 所 示 : 它 的 客户 名 录 会 指向 到 公司 相关 项 目的 专题 文章 ， 每 篇 文 
章 都 讲述 了 团队 在 项 目 中 的 具体 工作 职责 ， 以 及 他 们 是 如 何 完成 设计 的 。 


6.4.4 团队 介绍 


小 型 公司 通常 都 会 提供 一 个 介绍 团队 成 员 和 管理 层 的 页 面 。 图 6-5 所 示 的 
介绍 页 同样 来 自 于 Happy Cog， 以 一 列 带 有 注释 的 头像 照片 开始 ， 然 后 再 扩展 
到 每 个 团队 成 员 的 单独 页 面 。 


Happy Cog 的 创始 人 Jeffrey Zeldman “是 一 位 在 互联 网 标准 领域 举世 闻名 的 


O Jeffrey Zeldman 是 最 早 的 一 批 Web 设计 师 之 一 ， 之 前 曾 担任 艺术 总 监 和 广告 文案 摆 稿 人 。 
1995 年 建立 了 最 有 影响 力 的 个 人 站 点 Chttpz/zeldman.com), PEE Web 设计 理论 方面 的 经 
验 教 程 ， 拥 有 众多 读者 。1998 年 创办 了 民间 自发 的 互联 网 标准 推广 组 织 The Web Standards 
Project， 主 要 目的 是 说 服 Microsoft 和 Netscape 在 他 们 开发 的 浏览 器 中 支持 相同 的 技术 。 同 
年 他 创办 了 杂志 4 List 4part， 成 为 当时 业界 最 权威 、 最 有 影响 力 的 电子 杂志 。Zeldman E 
过 许多 文章 ， 出 版 过 两 本 书 ， 其 中 包括 书 中 提 到 的 这 本 Designing With Web Standards (KM 
WE: 应 用 Web 标准 进行 设计 》))。 同 时 他 还 是 一 位 深 受 读者 喜爱 的 环球 演讲 师 ， 于 2005 
年 参与 主办 了 关于 Web 标准 设计 和 编码 的 传播 会 议 An Event Apart。 


Happy Cogte £& 1 
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描述 , 潜在 


客户 可 以 深入 了 
解 他 们 的 工作 成 


果 和 过 程 
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WordPress 2 5 SELECTED WORK 
» A List Apart 
w NT Advertisi 
Unstable Lit d Desi ro 
nsta 1 
e Literature and Design ws + AIGA 
Write Manage Design Comments” Temas | Pages | em 
Post Page Unk Category » American College of Physicians 
Sire Fost » Amnesty International USA 
= 
Best Post Ever * Blogger 
Persas Mir] amu “o sad 3 » Books-A-Million 
Pon Abd meda * DD i O tmt mtn O e 
N00 EIL * Capgemini 
» Comhaltas 
e Dictionary.com 
» Housing Works 
» Kongregate 
» Krylon 
The revamped WordPress "Write" screen. View a four-minute screencast » Ma.gnolia 
showing a handful of highlights of the new interface. 
o MICA 
At Happy Cog, we're huge fans of WordPress, the open source blogging o The Posse Foundation 
software powered by web standards. From the blogs of The New York o SmartyPig 
Times to amateur homepages featuring goofy cat pictures, WordPress is 
used on hundreds of thousands of sites, read by tens of millions daily. It ° Thomson Reuters 
is the largest self-hosted blogging tool in the world. o United Nations/UNIFEM 
= e Warner Bros. Films 
When founder Matt Mullenweg approached us to redesign WordPress for 
an upcoming, significant version 2.5, he wanted more than a pretty new * WordPress 
skin. The entire user experience was up for review. 


专家 。 但 一 位 既 没有 读 过 Designing with Web Standards 他 在 本 领域 的 畅销 书 )， 
又 没 见 过 他 在 An Event Apart 会 议 〈 由 他 与 Eric Meyer ”共同 创办 ) 上 演讲 ， 也 
没 读 过 4 List Apart (他 为 Web 设计 师 创办 的 必 读 电子 杂志 ) 的 潜在 客户 ， 在 访 
问 该 网 站 之 前 没 必 要 预先 得 到 这 些 信息 。 而 在 Happy Cog 的 网 站 上 的 About 部 
分 ， 只 要 一 览 Jeffrey 的 个 人 资料 就 能 让 访问 者 对 Jeffrey 本 人 和 整个 公司 的 能 
产生 信任 ， 如 图 6-5 所 示 。 


这 些 团队 介绍 同时 也 有 助 于 通过 各 个 人 的 头衔 来 了 解 谁 在 公司 里 掌握 实 
Ko YE UIE, Jared 是 创始 人 及 CEO. TE Peachpit”, Nancy Aldrich-Ruenzel 是 
副 总 裁 兼 发 行人 。 如 果 和 你 谈话 的 人 不 是 Jared 或 者 Nancy,“ 关 于 我 们 ”会 告 


O Eric Meyer 是 HTML, CSS 和 互联 网 标准 方面 国际 知名 的 专家 ， 同 时 也 是 Complex Spiral 
Consulting 一 家 采用 互联 网 标准 技术 帮助 客户 节约 成 本 和 提高 效益 的 公司 〉 的 创始 人 。 著 
作 包 括 : Eric Meyer on CSS («Eric Meyer 谈 CSS)), CSS: The Definitive Guide («CSS 权威 
指南 》) 和 CSS Web Site Design Hands on Training ((CSS Web 站 点 设计 手册 》) 等 。 

O Peachpit 是 一 家 教育 出 版 机 构 ， 成 立 于 1986 年 ， 主 要 出 版 图 形 设 计 、 桌 面 出 版 、 多 媒体 、 
Web 设计 与 开发 、 数 码 视频 等 计算 机 方面 的 书籍 、PDF 和 视频 作品 。 网 站 是 http://www. 


peachpit.como 
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— di a Philadelphia 


We DESIGN beautiful websites, PUBLISH our best ideas, and 
SPEAK to a worldwide community. Find out more EN us. 
- es 2” : A 


Founded by a visionary and staffed by creative superstars, Happy Cog PEOPLE OF HAPPY COG 


delivers beautiful websites that never lose sight of the human being using o Jeffrey Zeldman 
them. From site structure to interface design, from branding to content 
» iti * Greg Hoy 
development, Happy Cog’s people are the authorities. 
Ern Eisen 
Jeffrey Zeldman e Christopher Cashdollar 
Founder/Executive Creative Director e Dan Mall 
An internationally known designer and writer, o Joll 
architect of the web standards movement, and creator s Kevin Holman 
of some of the web's best-known sites and brands. 
© Dave DeRuchie 
* Mark Huot 
us Mia Philadelphia * Heather Shaw 
lappy Cog s 


A respected industry veteran who has worked in 


design and leadership positions for Fortune 100 
companies and interactive consulting firms. 


STRATEGIC PARTNERS 


» Dan Cederholm 

e Liz Danzico 
Erin Kissane e Matt Golden! 
Editorial Director 
A writer and strategist who focuses on clear and * Aaron Gustafson 
precise business communication as a prerequisite for o Naz Hamid 
strong relationships with employees and customers. » Whitney Hess 

o Eric Meyer 


诉 你 他 可 能 没有 签 支票 或 合同 的 权力 。 但 如 果 这 人 是 Peachpit 销售 部 的 Scott 
Cowlin， 可 能 还 靠 点 谱 。 


6.4.5 ”时 事 与 新 闻 


为 了 进一步 完善 公司 的 背景 ， 许 多 网 站 的 “关于 我 们 ”还 会 提供 一 些 与 公 
司 相 关 的 新 闻 与 时 事 (Press Releases and News)。 时 事 能 让 网 站 的 受众 及 时 获知 
公司 的 重要 事件 、 管 理 层 变动 以 及 其 他 通告 ， 而 新 闻 则 让 公司 能 够 骄傲 地 宣传 
媒体 对 自身 的 报道 ， 如 图 6-6 所 示 。 


Zappos.com ^ 把 出 现在 杂志 以 及 新 闻 和 财经 网 站 上 的 文章 都 重新 发 表 在 网 
站 上 。 该 网 站 曾 见 诸 于 多 家 媒体 ， 包 括 时 代 周 刊 、 商 业 周刊 、Fast Company®, 
O Zappos.com 是 一 家 美国 的 鞋 类 和 服装 产品 在 线 零售 商 ， 创 办 于 1999 年 ，2007 年 销售 额 已 
超过 8 亿美 元 ， 被 称 为 “ 卖 鞋 的 亚马逊 ” 2009 年 7 月 被 亚马逊 以 8.47 亿美 元 的 价格 收购 。 
O Fast Company 是 美国 最 富 盛名 和 最 具 影 响 力 的 商业 杂志 之 一 ， 与 财富 杂志 、 商 业 周 刊 、 华 
尔 街 日 报 等 并 称 为 美国 乃至 世界 商业 〈 经 济 ) 领域 的 主流 媒体 。 


图 6-5 

团队 介绍 页 下 
来 了 一 股 产品 
后 的 人 性 气息 


he 3] 
o H 


第 6 章 ， 关 于 我 们 


Zappos.com Couture Rideshop Running Outdoor Blogs My Account My Favorites Help Live Help Y 


Zappos? About.Zappos.com 


POWERED by CULTURE 


| Q Shop Zappos.Com The Zappos Story Our Unique Culture Meet Our Monkeys Meet Our Teams Jobs At Zappos In The News | 
In The News Shoe In 
CNNMoney.Com CNNMoney.Com - Thursday, March 15, 2007 
CIO Insite 
TIME Zappos Has Become The No. 1 Footwear Retailer On The Web By Making Customer Service A 
Competitive Weapon. 
InternetRetailer.Com 
By Sidra Durst, Business 2.0 Magazine 
FastCompany.Com March 15 2007: 12:36 PM EDT 


InternetRetailer.Com (Business 2.0 Magazine) -- After San Francisco Web designer Jon Adams searched unsuccessfully for a pair of dress 


BusinessWeek shoes and some sneakers, a friend recommended shopping online at Zappos.com. 
TIME Adams ordered two pairs of shoes from the site. When one didn't fit, he exchanged them for another size and style. 
pera Then he purchased a third pair. 

izi 


"It's super easy to order, and super, super easy to return stuff," says Adams, who spent about $215. "It's just such 
a hassle to go around to stores." 


图 6-6 
发 表 来 自 第 三 方 的 文章 , 有 助 于 访问 者 相信 公司 信誉 卓著 . 客户 都 有 着 良好 的 体验 


等 等 ， 而 在 网 站 上 长 时 期 展示 这 些 内 容 ， 不 仅 能 让 客户 和 感 兴趣 的 访问 者 能 
时 了 解 这 些 报道 ， 还 能 增强 他 们 对 公司 的 信任 。 


那些 于 已 不 利 的 报道 ， 似 乎 自然 应 该 予以 排除 。 但 正如 6.5 节 所 述 ， 除 了 
完全 忽略 之 外 还 有 其 他 的 应 对 方法 ， 例 如 通过 社交 网 站 或 其 他 论坛 ， 针 对 这 些 
不 利 报道 与 客户 进行 开放 式 讨 论 。 如 果 该 报道 本 身 的 确 没 有 反映 公司 的 正面 形 
象 ， 公 司 至 少 可 以 以 建设 性 的 姿态 进行 回应 ， 并 且 以 此 为 契机 解答 用 户 的 疑虑 ， 
重新 获得 本 可 能 失去 的 信任 。 


展示 新 闻 与 时 事 文章 的 方式 并 不 复杂 一 一 通常 都 是 一 系列 带 有 链接 的 文章 
标题 ， 同 时 标注 出 日 期 。 不 过 类 似 Adobe Systems 这 样 的 大 型 公司 ， 相 关 报 道 
多 如 牛 毛 ， 要 想 完全 收集 齐 是 不 可 能 的 。Adobe 把 网 站 的 Press Room 〈 新 闻 发 
布 室 ) 一 栏 的 首页 划分 为 Press Releases CIT 3E 538 ). Corporate News (公司 
新 闻 )、Product News (P HD. Developer (开发 者 ) 及 Social Media News 
Releases 〈 社 会 化 媒体 报道 ) 等 多 个 子 区 域 。 而 且 它 只 提供 近期 发 布 的 一 系列 文 
章 ， 帮 助 客户 建立 信任 ， 得 到 及 时 的 信息 即 可 。 如 果 访 问 者 需要 的 只 是 最 新 的 
内 容 ， 费 力 维持 完整 的 存档 文件 似乎 略 显 画蛇添足 。 


646 ”工作 机 会 


网 站 除了 要 提升 访问 者 的 信任 感 之 外 ， 还 需要 激发 潜在 雇员 对 公司 的 信任 。 
求职 者 需要 了 解 应 聘 公司 的 方方面面 ， 例 如 提供 哪些 职位 、 职 位 要 求 、 工 资 福 


6.4 构成 元 素 


利 ， 甚 至 还 包括 公司 的 文化 。 


如 果 招 聘 部 分 比较 简单 ， 只 需 提 供 一 个 职位 列表 即 可 ， 每 个 职位 链接 到 相 
应 的 职位 描述 和 应 聘 要 求 。 不 过 如 果 是 大 型 的 公司 ， 拥 有 多 部 门 、 多 层级 的 组 
织 结构 、 员 工 成 千 上 万 ， 或 者 有 多 条 产品 线 、 机 能 复杂 ， 那 么 一 个 简单 的 职位 
列表 肯定 会 捉襟见肘 。 这 种 级 别 的 公司 通常 都 会 立足 更 高 ， 专 门 创建 一 个 子 系 
统 以 便 人 们 寻找 职位 、 递 交 申 请 。 


苹果 公司 的 About Apple〈 关 于 苹果 ) 部 分 把 招聘 职位 分 成 了 两 个 主要 类 
I 一 一 Apple Pro〈 苹 果 专 家 ) 和 Apple Store CERĘ EJE). Apple Pro 面向 那 
和 希望 加 入 公司 团队 工作 的 人 ， 其 中 的 职位 又 划分 为 多 个 部 门 ， 包 括 销售 、 市 
、 运 营 管理 、Mac 硬件 工程 、 软 件 工程 ， 等 等 ， 如 图 6-7 所 示 。 


WIE KE 


Job Opportunities 


Apple Pro 


Are you an experienced pro? New college grad? We're looking for the best. Explore the groups below for more 
information. 


E Mac Hardware Engineering Software Engineering 
| = Join the team of ingenious engineering minds Make the move to Apple's software engineering 
一 一 一 that design and develop Apple's revolutionary team—and move the industry forward at the 
~~ = products. Mac hardware engineering looks for blazing pace of innovation. Software 


me people with disciplines in electrical, 
mechanical, and specialized engineering, 
industrial design, and quality assurance. 


engineering is the division behind cutting-edge 
software like QuickTime, Spotlight, and iChat; 
the system-level software for iPhone and Apple 
Tv; Mac OS X; and more. 


iPod Engineering 

This is team that delivers many of Apple's 
cutting -edge consumer electronics. The 
talented iPod engineers, project managers, and 
designers are driving the digital music 
revolution with products such as the new iPod 
and iPod nano. 


n Applications 

Fano Each Apple application is managed by a 

iLife dedicated team of programmers, marketers, 
and project managers. Their passion for 
music, photography, and film is showcased in 
innovative applications such as iTunes, iPhoto, 
and Final Cut Pro. 


Sales 


The Sales team-including field and education 
sales, enterprise sales, the online store, and 
more-manages relationships with our resellers 


Ø Marketing 


This team creates the imaginative strategies-in 
product marketing, marketing 
communications, and public relations -that 


"rs O 


represent our products to the world. Their and customers. Our sales reps have the right 


innovative point -of-view is an integral part of combination of passion and product knowledge 
the product development process. to deliver the Apple experience worldwide. 
m Operations Information Systems & 

"n Spora role ee eer that dires Tech nology 

EA leading ER Pad pupa pai These Mac experts use their creativity to design 
spec. They drive "Apple's manufacturing solutions for customers and ensure that every 
process as well as worldwide procurement and been api phone, server farm, and network 
fulfillment. inside Apple is up and running, 24/7. 

Ly Legal, HR, Facilities AppleCare 


1 E These dedicated, behind -the-scenes teams 
support Apple's global success. Managing 
everything from buildings to benefits, they 
make sure Apple employees are effective every 
day. 


AppleCare provides award -winning service and 
support via an amazing network that includes 
self-service online tools, global service 
providers, and dedicated call centers. Their goal 
is simple: to give our customers the best 
experience possible, worldwide. 


c 


图 6-7 

大 公司 在 工作 机 
会 一 栏 可 能 还 需 

进一步 细 分 。 

来 自 苹果 的 这 个 
页 面 只 显示 了 该 
公司 Apple ”Pro 部 
分 的 职位 类 别 


我 们 可 以 点 击 某 个 具体 部 门 进 入 相应 的 分 类 页 (参见 第 3 章 的 目录 框架 )， 
以 了 解 主 要 的 职能 ， 并 查看 可 供 申 请 的 职位 类 型 ， 最 后 得 到 一 系列 现 有 的 职位 
列表 。 当 然 ， 我 们 找到 了 中 意 的 职位 以 后 ， 还 需要 跳 转 到 内 容 页 详细 阅读 职位 
描述 。 只 有 在 这 个 时 候 ， 我 们 才能 真正 了 解 到 在 申请 过 程 中 具体 需要 做 些 什 么 。 


不 过 “工作 机 会 ”这 一 元 素 并 不 仅 限 于 此 。 


在 吸引 求职 者 寻求 工作 机 会 的 同时 ， 突 出 企业 文化 方面 的 亮点 可 谓 好 处 多 
多 。 包 括 华 果 在 内 的 许多 公司 都 忽略 了 这 一 内 容 ， 不 免 有 害 无 着。 那些 试图 做 
到 这 一 点 的 公司 使 用 了 各 种 各 样 的 办 法 。 


Office Max ”用 最 平淡 无 奇 的 方式 向 我 们 展示 了 他 们 的 企业 文化 一 一 网 站 用 
三 大 段 文字 表述 了 该 公司 以 人 为 本 的 理念 。 没 错 ， 一 家 宣称 以 人 为 本 的 公司 居 
然 用 最 寡 然 无 味 的 文本 来 传达 这 一 信息 ， 在 阅读 后 人 们 只 会 感到 无 聊 和 腻 烦 。 
这 实在 有 悖 其 本 意 ， 也 无 法 让 人 振奋 精神 。 


而 另 一 方面 ， 在 设计 和 多 媒体 方面 颇具 实力 的 Adobe 公司 则 不 负 众 望 ， 用 
一 个 丰富 多 彩 、 华 丽 动 人 的 子 网 站 来 展现 自己 的 企业 文化 。 网 站 里 提供 了 多 个 
ARE Adobe 工作 生活 的 视频 短片 ， 列 举 了 在 该 公司 工作 的 十 大 理由 、 企 业 的 
社区 参与 、 员 工 活动 、 环 保 措 施 ， 甚 至 还 有 公司 的 核心 价值 〈 参 见 图 6-8). 


图 6-8 

Adobe 运 用 视频 
来 说 明 公司 内 部 
的 工作 和 生活 


A DAY IN THE LIFE AT ADOBE 


A Day in the Life at Adobe 


(D Office Max 是 美国 第 三 大 办 公用 品 零售 商 ， 创 办 于 1988 年 。 网 站 见 http://www.officemax.como 
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这 才 有 意思 ，Office Max。 


不 难看 出 ,“ 关 于 我 们 ”中 的 “工作 机 会 ”一 栏 同样 也 可 以 被 剥离 出 来 作为 
单独 的 框架 。 提 及 这 一 点 只 是 想 说 明 ， 网 站 和 Web 应 用 无 非 是 由 一 个 个 系统 搭 


建 起 来 ， 少 了 其 中 任何 一 个 ， 更 高 层 的 系统 就 会 受到 影响 ， 从 而 无 法 实现 公司 
及 用 户 更 广泛 的 目标 。 


6.4.7 ”联系 方式 


这 是 “关于 我 们 ”中 的 最 后 一 环 ， 是 最 为 重要 的 一 个 部 分 。 即 使 是 财富 
500 强 中 那些 家 喻 户 晓 、 无 需 交 待 企业 背景 的 公司 ， 也 需要 提供 公司 的 联系 方式 。 


尽管 很 重要 ， 但 联系 方式 部 分 无 需 多 加 说 明 。 顾 客 需要 技术 支持 ， 求 职 面 
试 者 需要 指明 方位 ， 供 应 商 需 要 送 货 地 址 ， 潜 在 的 客户 需要 了 解 销售 信息 ， 这 
样 的 例子 不 胜 枚 举 。 对 于 公司 〈 或 组 织 ) 来 说 ， 唯 一 困难 的 是 决定 应 当 提 供 哪 


些 信息 。 


一 位 在 家 办 公 的 咨询 顾问 可 能 并 不 想 让 所 有 人 都 看 到 他 的 地 址 ， 只 在 有 需 
要 时 才 会 交待 这 些 细节 。 不 过 电话 号 码 〈 当 然 你 也 可 以 自称 这 是 你 的 业务 专线 ) 
是 很 有 用 的 ， 尤 其 是 人 们 急切 地 需要 答案 ， 又 等 不 及 E-mail 的 时 候 。 而 另 一 方 
面 ， 财 富 500 强 公 司 通常 都 在 多 个 城市 设 有 多 个 办 事 处 ， 从 客户 服务 到 广告 垂 
询 还 设 有 多 条 800 免费 热线 。 


如 图 6-9 所 示 ，Adobe 的 联系 方式 一 栏 比 招聘 部 分 的 内 容 要 少许 多 。 不 过 
该 有 的 信息 一 样 也 不 少 。 


Contact Adobe 一 栏 同 样 被 分 为 多 个 页 面 ， 提 供 了 电话 号 码 、 办 公 地 点 、 
寻求 技术 支持 的 途径 、 费 用 支持 以 及 销售 信息 ， 用 户 甚 至 还 能 直接 提交 反馈 
建议 。 

另 一 种 类 型 的 联系 信息 是 店 址 查询 ， 访 问 和 人 口 通 常 都 较 大 ， 也 更 为 明显 。 
(自然 ， 它 只 适用 于 有 实体 店铺 的 零售 网 站 。) 这 类 信息 有 时 会 被 归 人 “关于 我 
们 ”中 ， 有 时 候 则 未 必 。 不 过 就 算 它 属于 这 个 部 分 ， 网 站 也 会 在 明显 位 置 〈 例 
如 持久 导航 栏 ) 提供 一 个 按钮 ， 以 便 访 问 者 能 直接 点 击 ， 查 看 店 址 列表 。 如 果 
列表 不 长 ， 网 页 只 需 列 出 每 家 店铺 的 电话 号 码 、 营 业 时 间 和 地 址 即 可 。 如 果 店 
铺位 于 不 同 的 地 理 区 域 ， 用 户 就 需要 输入 邮政 编码 作为 过 滤 条 件 ， 以 便 显 示 出 
位 于 该 区 域内 或 附近 的 店铺 ， 如 图 6-10 所 示 。 
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ntry or region” 


遍布 世界 各 
他 们 都 能 从 
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Select a region and language 


| Select a country or region +) Continue | 


Customer Service and Support Feedback Sales Company information Office locations 


CUSTOMER SERVICE BY PHONE TECHNICAL SUPPORT BY PHONE 


Check order status and get help with product registration, Get help for technical issues with products. 
serial numbers, upgrades and other general questions. 
Adobe Reader technical support 
Help with Adobe® Flash® Player and Shockwave® Player Phone support for free Adobe Reader is offered only to 


is provided online only, not over the phone. customers who have purchased a support plan. 
Customer Service 800-833-6687 Acrobat Standard 800-642-3623 
7 days a week mo = Monday-Friday 
ific ti rofessional 6am-5pm(Pacific ti 
6am-8pm(Pacific time) chno -5pm(Pacific time) 
Adobe 888-649-2990 Adobe Acrobat 800-945-9120 
LiveCycle® Monday-Friday Connect Pro Available 24 hours a day 
6am-5pm(Pacific time) technical support 7 days a week 
Adobe Acrobat 800-945-9120 Adobe Acrobat 800-422-3623 (800-42-ADOBE) 
Connect Pro Available 24 hours a day Connect Pro In- Available 24 hours a day 
7 days a week Meeting Support 7 days a week 


A small number of products do not offer phone support. 
Check your product's technical support options below. 


Technical 800-642-3623 
Support Monday-Friday 
6am-5pm(Pacific time) 
See all technical support options for your product 


| Select product support center *] | Go 


图 6-10 
通过 Target 的 店 直 查 询 可 Mai 
以 找到 带 有 所 需 部 门 的 店 Enter your city and state or ZIP Code to find a Target store. 
$. 如 果 离 你 最 近 的 Target 


Enter City and State or ZIP Code 


没有 药品 柜台 , 网 站 可 以 


为 你 在 稍 远 一 些 的 地 方 Only search for stores with: 
找到 © Pharmacy © Portrait Studio 
© Photo Center EJ Optical 
© SuperTarget © Wine Available 
B Clinic © Starbucks 


© 
Standard Mapa FIND A STORE 
O Enhanced Maps 


View All Target Stores » Contact Us » 
Search Along a Route » 


6.4 构成 元 素 


因为 Target 的 店铺 规模 大 小 不 一 ， 而 且 并 不 是 所 有 的 柜台 都 一 样 ， 所 以 除 
了 邮政 编码 之 外 ， 该 网 站 的 Find a Store 界面 还 提供 了 可 选 的 过 滤 条 件 ， 以 便 用 
户 能 够 找到 带 有 艺术 摄影 工作 室 、 药 品 柜台 或 者 摄影 器 材 中 心 的 店铺 。 


不 过 ， 如 果 除 了 邮政 编码 还 有 其 他 要 求 ， 这 种 设计 可 能 会 带 有 欺骗 性 。 设 
计 师 必须 正确 地 表达 出 为 了 让 搜索 更 加 有 效 ， 哪 些 信息 是 必需 的 。 


Gap.com 并 不 是 真 的 需要 用 户 输入 完整 的 住址 才能 找到 最 近 的 店铺 ， 但 看 
上 去 好 像 必须 这 么 做 ， 因 为 网 站 的 店 址 查询 页 面 并 没有 标示 出 哪些 输入 框 ( 如 
采 有 的 话 ) 是 必须 填写 的 ， 如 图 6-11 所 示 。 在 一 个 邮政 编码 所 覆盖 的 范围 内 其 
实 并 没有 多 少 Gap 店铺 ， 用 户 完 全 可 以 判断 哪 一 家 离 自 己 最 近 ， 因 此 具体 住址 
在 这 里 并 不 能 帮 上 多 大 人 忙 。 把 这 个 输入 框 去 掉 反 而 能 够 简化 流程 ， 缩 短 用 户 交 
互 的 时 间 。 


United States 


Select a store(s): 


M Gap (all stores) OGapKids babyGap 口 GapBody OGapMaternity 口 GapOutlet 


To search for the Gap, GapKids, babyGap, GapBody, 
GapMaternity, or GapOutlet stores nearest you: 


Please enter the information below: 


Address: 

1. Select the store you would like to find. 
2. Enter your zip code, city/state or complete address. City: 

(Note: The more information you provide, the better your State: 

search results will be.) ; 
3. Click the "Search" button to find the stores near you. Zip Code: ——— — — — — —4 
4. Store hours are subject to change. Please contact individual 

stores for operating days and hours. 


(顺带 提 一 句 ，Gap 的 店 址 查询 也 是 一 个 有 趣 的 例子 ， 说 明了 指示 过 多 时 的 
情况 。 很 明显 ， 用 户 必须 完成 表单 ， 点 击 按钮 才能 执行 搜索 ， 但 是 左 侧 那个 编 
号 列表 让 这 一 过 程 看 起 来 颇 为 复杂 。 这 段 见 长 的 文字 会 使 用 户 猜测 其 中 必定 包 
含 了 重要 的 内 容 ， 但 由 于 很 少 有 人 愿意 仔细 阅读 这 种 指示 ， 所 以 用 户 会 感觉 他 
们 无 法 完成 这 一 复杂 的 过 程 ， 从 而 放弃 。) 


最 后 一 种 联系 方式 ， 当 然 就 是 功能 强大 的 联系 表单 。 很 多 书 都 翻来覆去 地 
讨论 过 Web 表单 ， 因 而 我 们 不 必 在 此 缆 述 。 只 需要 知道 : 不 论 何 时 联系 表单 都 
是 一 个 可 行 的 选择 。 不 管 什 么 时 候 〈 联 系 客户 服务 、 查 询 销售 情况 、 争 执 费用 
问题 等 )， 除 了 电话 号 码 之 外 ， 一 定 要 提供 一 个 联系 表单 ， 这 样 你 的 电话 支持 所 
产生 的 开 文 就 会 大 大 减少 ， 因 为 多 数 问题 都 可 以 通过 网 络 通信 来 解决 。 而 互联 
网 服务 提供 商 是 不 会 因为 E-mail 的 距离 较 远 而 增收 费用 的 。 


图 6-11 


Gap.com 回 
要 求 的 信息 
实际 所 需 ， 


难以 判断 哪些 


必需 的 信息 


多 


反 
= 
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6.5 设计 标准 

“关于 我 们 ”中 的 构成 元 素 不 少 ， 不 过 本 框架 的 真正 目的 只 有 两 个 。 首 先 ， 
它 提 升 了 用 户 对 公司 (或 组 织 ) 的 信任 ， 不 管 是 小 型 设计 公司 还 是 特大 型 企业 。 
其 次 ， 它 有 助 于 信息 传达 ， 方 便 用 户 致电 ， 发 送 E-mail 或 登门 造访 ， 在 线 申请 
职位 ， 或 者 及 时 了 解 最 近 的 时 事 新 闻 。 


虽然 “关于 我 们 ”的 影响 面 有 限 ， 但 并 不 代表 没有 改进 的 空间 。 事 实 上 ， 
我 们 完全 可 以 通过 有 别 于 传统 的 方法 来 实现 本 框架 的 目标 ， 而 且 可 以 进一步 提 
高 效率 。 


将 其 他 内 容 融 入 “关于 我 们 ”主要 有 两 种 途径 ， 而 它们 正好 分 别 映射 了 我 
们 刚才 所 提 到 的 本 框架 的 两 个 目的 。 


首先 ， 我 们 可 以 探究 更 新 、 更 好 的 方式 来 建立 品牌 信誉 度 。 其 次 ， 我 们 可 
以 进一步 打开 沟通 的 渠道 。 


65.1 建立 品牌 信誉 度 


不 管 是 窜 在 地 下 室 的 博客 写 手 还 是 财富 500 强 公 司 ,“ 关 于 我 们 ”最 主要 的 
目的 是 帮助 用 户 建 立信 任 。 公 司 的 概貌 、 文 化 、 团 队 、 时 事 、 财 务 以 及 客户 等 
方面 的 信息 都 服务 于 这 个 目的 。 但 是 ,“ 关 于 我 们 ”也 许 只 应 该 传递 信息 ， 而 不 
应 用 于 建立 信任 。 因 为 不 管 它 多 么 有 说 服 力 ， 终 归 是 这 个 公司 自己 提供 的 内 容 ， 
因此 会 无 可 避免 地 带 有 片面 性 。 


滁 好 “关于 我 们 ”并 不 是 提高 品牌 信誉 度 的 唯一 途径 。 


毋庸 置疑 ， 建 立信 任 的 最 好 方法 就 是 提供 优秀 的 产品 〈 或 服务 )， 因 为 优秀 
的 产品 能 够 树立 良好 的 口碑 。 良 好 的 口碑 在 营销 中 最 具 说 服 力 ， 因 为 人 们 更 容 
易 相 信和 那些 看 上 去 与 自己 相似 的 人 的 诚 尽 推 荐 ， 而 不 是 油 腔 滑 调 的 陌生 营销 人 
员 的 陈 词 滥 调 。 热 情 地 向 同事 好 友 推荐 产品 的 顾客 ， 其 影响 力 要 远 超 过 大 多 数 
市 场 部 门 。 

如 何 开发 出 一 款 优秀 的 产品 超出 了 本 书 讲述 的 范围 ， 但 我 们 可 以 自信 地 说 ， 
优秀 的 产品 是 一 家 公司 所 拥有 的 最 好 工具 。 

想 想 你 认为 很 优秀 的 一 款 产 品 。 也 许 它 是 iPod 或 者 iPhone 的 一 款 ， 也 许 是 
一 款 设计 不 俗 的 装置 ， 或 者 是 你 车 里 的 某 个 高 级 功能 。 因 为 你 喜欢 它 ， 所 以 很 
可 能 会 告诉 给 你 的 朋友 ， 而 这 些 言 论 也 很 可 能 会 在 日 后 影响 到 他 们 的 购买 决定 。 


6.5 设计 标准 


要 想 从 这 一 想法 中 获 益 ， 首 先 你 需要 一 款 优秀 的 产品 ， 而 这 是 最 困难 的 部 
分 。 除 此 之 外 ， 你 不 必 在 “关于 我 们 ”中 比 费 苦心 地 堆砌 华丽 的 辞 敬 ， 可 以 把 
精力 放 在 为 顾客 创造 更 多 谈论 产品 的 途径 上 。 换 句 话说， 除了 自己 来 建立 用 户 
的 信任 ， 你 还 可 以 让 客户 们 为 你 这 么 做 。 


为 了 实现 这 一 点 ， 许 多 在 线 零售 商都 为 产品 提供 了 评级 、 评 论 、 推 荐 等 功 
能 ， 但 这 些 与 产品 紧密 相关 的 东西 通常 并 不 是 零售 商 们 自己 创造 的 。 如 果 一 家 
公司 能 够 鼓励 顾客 为 自己 生产 的 产品 评级 和 评论 ， 它 就 能 从 新 顾客 以 及 回头 客 
们 心中 获得 更 多 的 信任 《当然 ， 前 提 是 评论 的 内 容 要 客观 )。 


当然 ， 还 有 其 他 方法 来 建立 信任 一 一 实际 上 ， 下 一 条 设计 标准 可 以 作为 本 
条 的 子 标准 ， 因 为 它 的 目标 也 和 信誉 度 有 关 。 


6.5.2 ”打开 沟通 的 渠道 


标准 的 “关于 我 们 ”通常 都 只 是 让 访问 者 了 解 到 和 自己 打交道 的 是 谁 〈 这 
个 公司 是 做 什么 的 ， 负 责 人 是 谁 ， 等 等 )。 但 现在 是 Web 2.0 时 代 ， 这 部 分 可 能 
会 遗漏 一 些 重要 的 内 容 。 比 如 ， 公 司 或 组 织 与 其 社区 相互 联系 的 各 种 途径 ， 例 
如 通过 社交 网 站 。 


正如 The Cluetrain Manifesto 的 作者 们 在 数 年 前 所 指出 的 ， 市 场 即 谈话 。 
就 这 点 而 论 ， 网 站 除了 标识 出 联系 信息 之 外 ， 同 样 也 可 以 转向 谈话 发 生 的 第 一 
线 一 一 也 就 是 公司 的 粉丝 和 敌人 都 能 够 和 “关于 我 们 ”中 列 出 的 代表 交流 的 地 
方 。 我 们 可 以 回应 的 地 方 。 


比如 ， 捷 蓝 航 空 ” 和 其 他 一 些 公司 已 经 配备 了 专人 对 它们 的 twitter 进行 更 
新 。 此 举 值 得 其 他 公司 效法 。 


Zappos 公司 的 CEO, Tony Hsieh 就 是 一 个 劲头 十 足 的 twitter 用 户 ， 据 称 他 
鼓励 职员 在 工作 时 自由 地 在 twitter 上 发 布 有 关公 司 的 消息 。 和 许多 公司 不 同 ， 
Zappos 并 不 禁止 其 呼叫 中 心 的 员工 使 用 网 络 ， 反 而 鼓励 公司 的 客户 支持 代表 们 
自由 地 在 网 上 谈论 在 Zappos 的 工作 与 生活 ， 如 图 6-12 Bras. 


O The Cluetrain Manifesto(《 市 场 就 是 谈话 : 影响 传统 企业 思维 的 95 个 观点 》) 由 Rick Levine, 
Christopher Locks, Doc Dearls Ej David Weinberger 合 著 ， 可 以 说 是 Web 2.0 浪潮 的 先知 。 书 中 
的 主要 观点 是 ， 商业 在 本 质 上 是 人 性 的 ， 自 然 、 人 性 的 交谈 是 商业 的 真实 语言 ， 如 果 公 司 内 
部 人 员 与 外 部 人 员 沟 通 交 流 ， 公 司 就 会 获得 最 大 收益 。 书 中 提 到 的 “95 条 论 纲 ” 中 的 第 一 条 
就 是 市 场 即 谈话 。 
O 捷 蓝 航空 JetBlue Airways) 是 美国 的 一 家 廉价 航空 公司 ， 主 要 营运 美国 内 陆 航线 和 来 往 加 勒 
比 海 、 巴 哈 马 和 百 莫大 的 国际 航线 。 网 站 是 http:/www:jetblue.com。 
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图 6-12 


文 个 而 丁 = Meet Our Monkeys Tony Hsieh - CEO 
这 个 页 面 中 最 重 y y 
的 内 Am 3t 不 是 那 Tony Hsieh - CEO Tony originally got involved with Zappos as an advisor and investor in 
Aired Lia COO; CFO 1999, about 2 months after the company was founded. Over time, 
段 个 -人 资料 而 是 : Tony ended up spending more and more time with the company 
A Fred Mossler because it was both the most fun and the most promising out of all the 
DL sem > companies that he was involved with. He eventually joined Zappos full 
AER 
在 段 洛 TA 的 那 time in 2000. Under his leadership, Zappos has grown gross 
AE a merchandise sales from $1.6M in 2000 to over $1 billion in 2008 by 
MEE, LAS focusing relentlessly on customer service. 
kir 2 008 ZAPPOS 
twitter E IR 2008 Tony focuses on continuing to grow the business at a rapid pace while 
os CULTURE Lo cnn apap pipe edi iris 
随 To ny H sien e Zappos, Tony co-founded Venture Frogs with Alfred Lin. Venture Frogs 
RE is an incubator and investment firm that invested in Internet startups, 
这 位 Zappos 的 including Ask Jeeves, Tellme Networks, and of course, Zappos.com. 
à Prior to Venture Frogs, Tony co-founded LinkExchange, an advertising 
E E O s Te 都 与 network that was successfully sold to Microsoft for $265M in 1998. 
己 的 客户 了 Tony met Alfred Lin (COO/CFO) in college, when Tony was running a 
I pizza business and Alfred was his #1 customer. 
ZR rá 
E t X D Follow Tony Hsieh on Twitter 


Follow Zappos 


CEO 


"twitter 


a naeru 


虽然 捷 蓝 航空 没有 在 网 站 上 明确 地 列 出 自己 的 社交 举动 ， 但 公司 在 twitter 
上 非常 活跃 ， 定 期 利用 feed 公布 自己 的 超 低 票 价 ， 回 应 顾客 对 公司 的 评论 ， 其 
至 直接 提供 折扣 。 


Best Buy 的 Connect GREE) 频道 向 顾客 展示 了 出 自 本 公司 员工 之 手 的 博客 
MH. YouTube 视频 以 及 twitter 消息 ， 不 论 其 内 容 是 否 与 Best Buy 相关 ， 如 图 
6-13 所 示 。 


O Go to About Zappos.com's Homepage 
© Go to Shop Zappos.com 


DE 
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Best Buy 让 全 公 
司 的 职员 和 世界 
ETE. 视频 


和 twitter 消 息 ， 


0 


BEST BUY. 


H TEHE AA Home 
^ A 正如 全 J Best Buy Connect About Best Buy 
PER, 他 们 有 很 2» News Centel 
多 趣 Jo 以 Welcome to Connect! - a new way for you to engage with the actual people, Investor Relations 
ut real behavior and unedited perspectives of those who power Best Buy. Career Center 


Whether they're blogging about a great idea from a meeting at work, posting 
videos with holiday gift giving advice, or microblogging about what they're 
going to eat for dinner, we think they have something interesting to share and 


we invite you to take a look. 
[EB] Connect! Contact Us 


The feeds highlighted in this section are from employees throughout our 
company who have opted-in to share their perspectives and we expect the 
number - of employees and feed types featured - to grow. So check back often. 
Because we're proud of the individuals who power our company and the 
unique perspectives they bring to the table every day. 


Community Relations 


Corporate Responsibility 


> The Power of Unfiltered Communication 
1 hour 56 min old | blog - Gina Debogovich 


> bby_communaute: Tu veux un nouveau aspect 
pour ton téléphone cellulaire, ordinateur ou 
lecteur de MP3? http:/www.bestbuyskins.com/ 
4 min 7 sec old | twitter - bby communaute 


sBojg pm 
WAL em 


* flag as inappropriate 


flag as inappropriate 
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另 一 种 选择 〈 此 举 还 能 提升 知名 度 ) 就 是 让 公司 在 Get Satisfaction ( getsatis- 
faction.com) “上 创建 一 个 专属 页 面 ， 以 便 顾客 能 集中 发 布 各 种 问题 或 评论 。 一 
般 都 是 其 他 读者 对 此 作出 回应 ， 例 如 回答 问题 或 者 提出 自己 的 见解 ， 但 其 实 公 
司 本 身 也 可 以 作出 回应 ， 让 雇员 进入 页 面 与 用 户 直接 交流 。 


还 有 一 种 可 能 就 是 指派 一 些 人 在 网 上 留意 有 关公 司 的 博客 文章 、 论 坛 中 的 
问题 以 及 各 大 社交 网 络 的 更 新 ， 并 且 作 出 回应 。 此 举 不 仅 有 助 于 公司 近 距 离 地 
了 解 客 户 们 想 要 的 和 喜欢 的 东西 ， 同 时 还 有 机 会 解决 负面 新 闻 和 抱怨 。 通 过 这 
种 公开 的 沟通 交流 ， 你 能 及 时 发 现 客户 的 不 满 ， 并 且 帮 助 他 们 解决 问题 。 自 然 ， 
公司 也 应 该 回应 那些 快乐 的 顾客 一 一 感谢 他 们 对 本 公司 或 产品 的 厚爱 及 宣传 ， 
这 能 提升 他 们 本 已 拥有 的 信任 。 


建立 品牌 信誉 度 并 没有 什么 万 能 的 良 方 。 提 供 优秀 的 产品 ， 对 你 的 客户 保 
持 真 诚 、 公 平和 友好 ， 然 后 提供 条 件 以 便 他 们 谈论 自己 的 体验 ， 谈 论 你 。 


终归 ， 这 不 只 是 关于 我 们 。 这 同样 也 关于 他 们 。 


® Get Satisfaction 是 一 个 为 消费 者 和 公司 搭建 的 交流 社区 。 消 费 者 可 以 在 某 个 公司 的 页 面 上 提出 
对 产品 或 服务 的 疑问 ， 分 享 创意 或 者 评论 。 而 经 过 认证 的 该 公司 雇员 也 可 以 代表 公司 发 言 ， 
回答 访问 者 的 问题 或 者 收集 用 户 反馈 ， 从 而 改进 自己 的 产品 ， 提 高 服务 质量 。 


= 一 本 半 中 ， 我 们 将 着 眼 于 特定 主题 领域 的 框架 ， 以 便 向 大 家 说 明 不 同 的 网 站 
-类 型 应 该 如 何 包 含 其 各 自 的 框架 。 这 些 框 架 只 存在 于 特定 的 体裁 中 ， 正 是 


它们 造成 了 不 同 领 域 网 站 之 间 的 千差万别 。 作 为 本 章 探讨 的 实例 ， 电 影 网 站 非 
常 适合 (这 可 能 有 些 出 人 意料 )。 大 家 一 般 会 认为 ， 这 种 网 站 大 多 传递 的 都 是 娱 


乐 性 强 、 引 人 入 胜 的 体验 ， 似 乎 过 于 特 立 独行 、 失 去 了 作为 案例 的 普遍 性 。 但 


男 一 方面 ， 电 影 网 站 体现 出 了 难得 的 一 致 性 ， 这 使 得 它们 非常 易于 被 剖析 ， 也 


易于 大 家 理解 。 


在 7.4 节 中 ， 我 们 将 探寻 改进 和 创新 的 可 能 怕 
把 注意 力 放 在 娱乐 性 上 吧 (当然 ， 再 加 上 一 系列 框架 元 素 o 


EE。 不 过 在 此 刻 ， 还 是 让 我 们 


设想 一 下 ， 正 在 冲浪 的 你 点 击 到 了 某 个 电影 网 站 上 ， 并 且 开始 观看 预告 斤 。 


你 看 到 在 黑暗 中 有 一 个 人 ， 正 跪 在 一 个 金属 的 平台 上 。 炊 烈 的 火花 从 他 


身 


边 四 射 开 来 。 他 正在 焊接 着 什么 。 你 凑 近 看 到 他 的 护 目 镜 ， 判 断 着 他 的 身份 ， 


而 就 在 此 时 ， 此 人 缓慢 地 取 下 了 护 目 镜 。 他 坚 妆 的 下 颌 和 深 选 的 眼神 开始 营 
出 一 种 神秘 感 。 背 景 声音 时 隐 时 现 。“30 秒 倒数 开始 。” 远 处 传 来 缓慢 、 如 击 
般 的 心跳 回 


* 


ia 


[1 
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“全 世界 的 视线 此 刻 都 汇聚 于 太空 .”? kk, “PECAR.” O ARH 
远 ， 你 四 处 移动 视线 ， 发 现 之 前 的 那个 平台 只 是 一 个 巨大 机 械 的 很 小 一 部 分 。 
机 械 外 壳 的 边缘 向 四 面 八 方 反射 着 银 光 。“ 这 是 一 个 人 的 一 小 步 ， 却 是 人 类 的 一 
大 步 .”” 吹 - 史 。 倒 数 计时 从 喷 杂 中 再 次 浮现 出 来 ， 勉 强 能 听见 。“6, ”已 经 数 
到 6 了， 你 的 脉搏 加 快 。 吹 - 吹 。“5,” 鼓 声 开始 加 速 了 。“4,” 吹 - 吹 。 机 械 的 
SHUT. ATER. BAKKE. RK. RTL. REPENS PS 


突然 穿 透 了 噪音 。 


66 Af m 


于 由 。 
AK , 
倒计时 开始 加 快 。 
it 3 5 » 
AK , 
ts 2 S » 

音 高 涨 。 

“人 类 的 终极 边疆 .”” 
AK , 


音乐 出 现 。 你 曾经 听 过 这 段 旋律 。 你 对 它 非 常熟 悉 。 


一 阵 战栗 。 


视线 上 升 ， TS RC EL re Mp aU. 井 取 号 ” 


星 舰 ”， 还 处 于 建造 阶段 。 图 像 越 来 越 清晰 。 


QD 本 名 原文 为 “The eyes of the world now look into 

大 学 发 表 的 关于 太空 计划 的 演说 。 

Q 本 名 原文 为 “The eagle has landed”， 出 自 1969 4 

寺 肖 和 地 球 联络 的 第 一 句 话 。 

© 本 句 原 文 为 “That’ s one small step for a man; one 
员 阿 姆 斯 特 朗 在 踏 上 月 球 后 的 名 言 。 


这 就 是 被 全 世界 影迷 疯狂 追捧 数 


space", 出自 1962 年 美国 肯尼迪 总 统 于 莱 


F 座 号 登 月 舱 在 月 球 着 陆 后 ， 宇 航 员 阿 姆 


giant leap for mankind”， 出 自 1969 FF} 


= 


© 这 句 话 出 自 科 幻影 视 剧 集 《 星 际 迷 航 》(Star Trek) 每 一 集 的 开头 旁白 ， 全 文 为 “宇宙 ii， 人 
类 的 终极 边疆 。 这 里 叙述 的 是 星 舰 进取 号 的 旅程 ， 它 的 五 年 任务 ， 是 为 了 要 探索 这 全 然 未 


知 的 新 世界 ， 寻 找 新 生命 和 新 文明 ， 勇 敢 地 航向 前 人 所 未 至 的 领域 ”。 


© 这 里 的 进取 号 (USS Enterprise) 指 的 是 影片 《星际 迷航 》 中 著名 的 联邦 星 舰 。 现 实生 活 中 


军 的 主力 之 一 。 


的 进取 号 其 实 是 世界 上 第 一 条 核 动力 航空 母 舰 ， 于 1960 年 正式 完工 下 水 ， 迄 今 仍 是 美国 海 


十 年 之 入、 史诗 般 的 影视 剧 集 的 最 新 一 部 影片 。 


你 看 到 指向 Facebook 的 链接 。 点 击 。 你 希望 告诉 所 有 人 这 部 影片 即将 上 
映 。 


随即 你 又 回 到 网 站 ， 浏 览 图 片 库 、 星 舰 360° 全 景 图 、 和 角色 档 案 、 下 载 桌 
面壁 纸 。 背 景 音乐 一 直 莹 绕 耳 边 ， 情 绪 如 潮水 般 起 伏 。 每 一 次 点 击 都 带 你 探索 
星 舰 中 新 的 部 分 。 你 决心 要 尽 可 能 多 地 了 解 ， 尽 可 能 多 地 倾听 ， 尽 可 能 多 地 欣 


Hk 


这 些 都 是 在 一 个 优秀 的 电影 网 站 上 可 能 会 发 生 的 事情 。 而 StarTrekMovie. 
com 正 是 这 样 一 个 优秀 的 电影 网 站 。 


理所当然 ， 这 一 切 都 是 因为 “电影 网 站 ”框架 而 成 为 可 能 。 


7.1 描述 


电影 网 站 是 一 种 被 设计 成 类 似 广 告 宣传 册 般 的 站 点 ， 目 的 是 劝说 和 吸引 观 
众 前 来 观 影 。 在 本 质 上 它 是 一 个 精心 制作 的 广告 一 一 可 以 说 是 极为 精心 ， 一 个 
考究 的 电影 网 站 既 能 提供 良好 的 体验 又 能 提供 充足 的 资料 ， 既 有 临场 感 又 有 社 
交 元 素 ， 既 有 吸引 力 又 有 交互 性 。 对 于 大 多 数 电影 来 说 ， 网 站 只 是 为 了 劝说 人 
们 在 某 天 晚上 去 影院 贡献 一 点 血汗 钱 。 而 类 似 《 星 际 迷 航 》 这 样 的 电影 ， 其 收 
入 已 经 从 影院 扩展 到 了 玩具 业 、 服 装 业 和 其 他 领域 ， 它 们 的 目的 则 是 引爆 话题 ， 
吸引 铁杆 粉丝 把 这 些 元 素 融 入 自己 的 生活 ， 哪 怕 只 是 一 小 段 时 间 。 


电影 网 站 大 概 有 两 种 主要 的 类 别 ， 我 们 称 之 为 “独立 式 站 点 ”和 “集团 式 
站 点 ”。 


独立 式 站 点 ， 例 如 影片 《孤岛 疑云 》 “的 网 站 (如 图 7-1 所 示 )， 正 如 其 名 
称 所 示 ， 是 完全 独立 的 电影 网 站 ， 就 像 那 些 针 对 单独 某 个 产品 的 网 站 一 样 。 独 
立 式 站 点 通常 都 有 独立 的 域名 ， 其 中 包含 了 影片 的 标题 (例如 StarTrekMovie. 
com)， 有 自己 的 主页 、 完 全 自 定义 的 设计 ， 没 有 任何 与 影片 无 关 的 内 容 。 


O RZEZ) (Shutter Island) 是 一 部 2010 年 2 月 上 映 的 美国 惊悚 片 ， 讲 述 了 1954 年 两 名 调 
查 员 前 往 一 个 关押 精神 病 犯 人 的 小 岛 调 查 失 踪 者 的 故事 。 本 片 由 马丁 。 斯 科 塞 斯 执导 ， 莱 昂 
纳 多 。 迪 卡 普 里 奥 主 演 。 电 影 网 站 为 : http://www.shutterisland.como 
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集团 式 站 点 则 与 之 不 同 ， 它 们 位 于 某 个 更 大 的 电影 集团 网 络 内 部 ， 呈 现 出 
的 品质 和 该 网 络 中 的 每 一 个 网 站 都 不 相 上 下 。 福 克 斯 探照灯 公司 ”， 参 见 图 7-2 
中 的 FoxSearchlight.com， 就 是 许多 即将 上 映 的 影片 的 营销 门户 ， 而 且 为 底下 所 
ju 电影 网 站 都 提供 了 相同 的 制作 工具 和 内 容 。 在 FoxSearchlight.com 上 ， 每 一 

电影 网 站 都 包含 了 一 系列 内 容 模板 ， 例 如 演 职员 信息 、 相 关 链 接 、 附 加 内 容 、 
a i 
片段 或 者 专门 设计 的 图 片 。 


当然 ， 与 为 每 一 部 电影 创建 独立 式 站 点 相 比 ， 这 种 网 站 制作 起 来 要 简单 得 
多 。 但 是 把 网 站 打包 进 大 型 电影 网 络 可 能 会 产生 很 多 问题 ， 因 为 适合 此 影片 的 
工具 并 不 一 定 适 合 彼 影 片 。 这 种 做 法 甚至 有 可 能 会 对 营销 上 造成 不 良 影响 。 


比如 ， 在 写作 本 书 时 ， 影 片 《 曾 经 》”(www.foxsearchlight.com/once) 和 


© 福克斯 探照灯 (Fox Searchlight Pictures) 是 二 十 世纪 福克斯 公司 (20th Century Fox Film 
Corporation) 于 1994 年 创立 的 子 公 司 。 

O (HZ) COnce) 是 一 部 2006 年 上 映 的 爱尔兰 音乐 电影 。 影 片 讲述 了 一 对 失意 于 现实 生活 中 
的 陌生 男女 ， 在 一 次 偶然 相遇 之 后 ， 发 现 对 方 与 自己 对 音乐 有 着 共同 的 爱好 ， 并 合 录 了 一 
张 音乐 专辑 ， 在 此 过 程 中 从 彼此 身上 找到 生活 的 方向 与 勇气 ， 然 后 各 自 去 寻找 自己 的 梦想 。 
本 片 被 多 位 影评 人 评 为 2007 年 十 大 最 佳 影片 ， 获 得 2 项 格 莱 美 奖 与 1 项 奥斯卡 金 像 奖 提 
名 ， 单 曲 Falling Slowly 获得 奥斯卡 最 佳 原创 歌曲 奖 。 


图 7-1 
Ek CAO m AE 
zx) 的 支持 站 点 


7-2 


FoxSearchlight. 


com 拥 


AZ 列 


电影 网 站 


第 7 章 电影 网 站 


HOME FILMS VIDEOS BLOG STUDIO SEARCHLAB SHOP SEARCH GO 


FEATURES 


POST GRAD 
AUG 21, 2009 


VIDEOS . 


500 Days of Summer: Behind the Scenes of (500) DAYS OF 


MY LIFE IN... SUMMER Photo 
kk * tok Ik 

The actors from MY LIFE Ch 
IN RUINS talk about what o 
a new phrase they film in this fun little video 


Play Video » Play Video » 


(3E 3:) (www.foxsearchlight.com/adam)> 的 集团 式 站 点 都 是 福克斯 探照灯 网 站 
的 一 部 分 。 二 者 选取 了 同样 的 配色 主题 ， 使 用 了 同样 的 标签 ， 拥 有 同样 类 型 的 
内 容 。 这 两 个 网 站 没有 任何 独特 之 处 ， 尽 管 两 部 影片 彼此 完全 不 同 。 更 糟糕 的 
是 ， 这 些 隶 属于 福克斯 探照灯 的 子 站 点 都 有 一 个 自动 轮 播 的 广告 模块 ， 显 示 有 
关 其 他 电影 的 内 容 。 而 影片 《曾经 》 的 站 点 (一 部 反映 生活 的 电影 ， 讲 述 的 是 
两 位 音乐 家 一 同 创作 、 各 自 奋 斗 的 故事 ) 中 偶尔 会 莫名 其 妙 地 出 现 《 被 迫 杀 人 》 
“的 广告 ， 而 这 是 一 部 由 史 蒂 文 。 席 格 ”* 主演 的 动作 片 。 很 不 幸 ， 影 业 公 司 似乎 
认为 《曾经 》 的 观众 接 下 来 希望 看 到 的 片子 是 《被 迫 杀 人 》。 


O GE) (Adam) 于 2009 年 上 上 映 ， 讲 述 了 一 个 乐观 、 久 经 世故 的 年 轻 女子 和 一 个 神秘 、 自 闭 
且 才 华 横 溢 的 年 轻 男 子 之 间 的 爱情 故事 。 

© (WERA) ODriven to Kill) 于 2009 年 5 月 上 映 ， 史 蒂 文 。 席 格 在 其 中 扮演 一 位 前 俄罗斯 
犯罪 团伙 的 成 员 ， 金 盘 洗 手 后 为 救 家 人 而 重 操 旧 业 。 

O dx JH (Steven Seagal) 是 美国 著名 动作 电影 明星 ， 曾 前 往日 本 研习 柔道 等 武术 ， 后 
开设 武 馆 ，1987 FHEARA. ASA EE EER) (Under Siege) 系列 。 


7.2 上下文 情 境 


同样 是 自动 轮 播 的 内 容 ， 在 《亚当 》 的 网 站 上 则 会 出 现 美 国 音 乐 学 院 的 广 
告 。 这 个 广告 要 是 放 在 《曾经 》 的 网 站 上 可 谓 完美 ， 但 它 与 亚当 一 片 却 毫 无 
关系 。 


如 果 电 影 网 站 只 要 攀附 大 品牌 ， 很 可 能 会 在 体验 方面 有 所 损失 。 这 种 做 法 
会 使 本 应 独一无二 、 极 具 吸 引力 的 用 户 体验 变 成 了 常规 、 甚 至 可 能 是 相当 冷漠 
的 “标准 化 ”产物 。 福 克 斯 探照灯 曾 试图 对 大 量 电影 网 站 进行 标准 化 ， 但 并 没 
有 建立 一 套 引 人 和信 胜 的 标准 ， 反 而 只 剩 下 同 质 化 的 用 户 体 验 ， 缺 少 独立 的 主题 
和 上 下 文 情 境 。 


这 说 明 就 算 使 用 了 框架 ， 你 也 必须 针对 具体 项 目 选择 合适 的 元 素 ， 并 且 要 
使 它们 满足 你 的 需求 。 


独立 式 站 点 往往 都 更 具 吸 引力 。 这 种 网 站 一 般 使 用 Adobe Flash 创建 ， 设 
计 师 可 以 通过 微妙 的 视觉 特效 、 动 画 转 场 、 分 层 背 景 、 音 效 和 音乐 《原创 音乐 
以 及 原声 碟 中 的 歌曲 ) 更 好 地 调动 访问 者 的 情感 状态 。 这 些 美 学 元 素 组 合 在 一 
起 营造 出 一 种 身 临 其 境 的 感觉 ， 使 网 站 感觉 更 像 一 个 带 有 某 种 情感 的 具体 场所 。 


人 们 喜欢 娱乐 ， 而 电影 正 是 最 好 的 方法 。 电 影 能 让 你 思考 、 欢 笑 、 悲 伤 、 
欣喜 ， 或 者 作出 各 种 回应 。 而 电影 网 站 就 是 要 告诉 访问 者 ， 这 部 影片 能 够 给 他 
想 要 的 东西 。 


要 想 做 到 这 一 点 ， 设 计 师 们 通常 会 避免 把 网 站 建成 巨大 而 复杂 的 应 用 。 相 
反 ， 他 们 会 把 网 站 的 范围 进行 集中 ， 将 其 分 解 成 几 个 关键 元 素 。 抛 开 其 丰富 性 
和 复杂 性 不 谈 ， 不 论 它们 使 用 时 的 上 下 文 情境 如 何 ， 电 影 网 站 其 实 颇 容易 推断 。 
而 这 也 正解 释 了 本 书 为 什么 要 专门 开辟 一 音 ， 讨 论 特定 领域 〈 也 就 是 电影 网 站 ) 
的 框架 体系 。 目 的 是 向 大 家 说 明 ， 不 管 是 金融 业 还 是 非 慢 利 组 织 的 网 站 ， 其 杠 
架 体 系 都 大 致 相同 ， 而 且 都 能 带 来 利益 。 我 们 特别 选择 电影 网 站 为 例 只 是 因为 
金融 业 的 网 站 很 难 写 出 令 人 激动 的 描述 。 


72 ”上下文 情境 


我 们 此 刻 讨论 的 是 一 个 完整 的 网 站 类 型 ， 而 不 是 网 站 中 的 某 个 方面 (例如 
搜索 系统 )， 因 此 其 上 下 文 情境 并 不 难 解释 。 一 个 人 听 说 了 某 部 影片 ， 希 望 深入 
了 解 ， 于 是 前 往 该 电影 网 站 阅读 影片 摘要 ， 观 看 预告 片 ， 查 明 有 何 影星 ， 也 许 
还 会 再 购买 一 两 件 相关 的 工艺 品 。 我 们 将 在 7.4 节 深 入 讨论 。 


影 网 站 与 一 般 的 广告 宣传 站 点 有 少许 不 同 。 它 们 不 只 需要 提供 既 充满 说 
服 力 又 引人入胜 的 内 容 ， 还 需要 把 这 些 内 容 用 多 媒体 的 形式 展现 出 来 。 它 们 需 
要 借助 多 媒体 的 精彩 效果 来 推销 产品 。 以 下 是 一 些 常 用 的 元 素 ， 正 是 它们 劝说 
所 有 像 你 这 样 的 人 往 口 里 塞 满 侣 米花 ， 用 一 大 桶 可 乐 冲 进 肚子 里 ， 然 后 拿 着 巧 
克 力 坐 上 两 个 小 时 的 情感 过 山 车 ， 并 为 这 一 切 掏腰包 。 


除了 一 些 精 彩 的 预告 片 之 外 ，StarTrekMovie.com 还 提供 了 评论 摘 引 、 最 近 
的 影院 、 放 映 时 间 、 粉 丝 站 点 申请 、 论 坛 链接 、 社 交 选 项 ， 甚 至 还 有 一 个 获取 
E-mail 更 新 的 控件 ， 如 图 7-3 所 示 。 而 所 有 这 些 正 构成 了 初始 页 (Splash page). 


图 7-3 
Re 的 “Pure Filmmaking Exhilaration" 
的 初始 页 online buzz / more reviews. 
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初始 页 大 体 上 就 是 一 个 带 有 链接 的 电影 海报 。 与 其 他 电影 海报 一 样 ， 初 始 
页 既 能 包罗 万 象 ， 又 能 精简 朴素 ， 其 目的 也 相同 : 吸引 人 们 更 深入 地 了 解 。 要 
想 做 到 这 一 点 ， 它 就 得 包含 电影 海报 上 所 能 找到 的 一 切 广 告 元 素 ， 同 时 还 要 
支持 交互 。 在 《星际 迷航 》 的 网 站 上 ， 最 主要 的 入 口 是 那 个 大 尺寸 的 Enter the 
Site HEAP ah) 按钮 ， 它 会 带 访问 者 进入 满 是 动画 和 音乐 的 仿真 Flash 部 分 ， 
但 我 们 并 不 一 定 非 得 点 击 它 。 我 们 可 以 完全 跳 过 体验 部 分 ， 直 接 查看 放映 时 间 ， 


7.9 构成 元 素 


或 者 通过 twitter 分 享 网 站 的 链接 ， 或 者 在 Facebook 上 成 为 该 影片 的 “粉丝 ”。 
初始 页 大 多 属于 独立 式 站 点 。 在 集团 式 站 点 上 一 般 不 会 出 现 。 


初始 页 如 何 吸引 人 们 进行 深入 了 解 ， 实 际 上 是 揭示 美学 如 何 影响 人 类 思想 
的 好 例子 ， 这 一 点 很 有 意思 。 虽 然 初 始 页 上 的 文本 都 相当 醒目 《例如 “7 月 26 
日 隆重 上 映 ”)， 但 该 页 面 真 正 的 强大 之 处 实际 上 是 在 视觉 设计 上 ， 通 过 所 营造 
的 气氛 来 打动 访问 者 。 通 过 精心 选择 的 儿 张 图 片 ， 其 至 只 是 一 张 图 片 ， 设 计 师 
就 能 在 其 中 注入 宁静 、 用 疑 、 恐 怖 、 怀 旧 等 各 种 情感 ， 而 要 想 让 访问 者 对 影 
念念不忘 ， 其 感官 与 心灵 的 响应 是 至 关 重 要 的 。 电 影 无 非 就 是 讲 故事 ， 而 在 初 
始 页 上 的 图 片 则 是 设计 师 们 捕获 观众 想象 力 的 第 一 个 机 会 《至少 在 互联 网 上 )。 


如 图 7-4 所 示 ， 影 片 《 下 载 南 希 》? Cwww.downloadingnancythemovie. 
com/) 的 初始 页 提供 了 常见 的 元 素 〈 影 片 的 上 映 日 期 、 标 题 、 主 要 演员 和 网 站 
导航 )， 但 比 这 些 更 为 吸引 人 的 是 ， 网 站 显示 了 两 张 并 列 的 图 片 。 右 边 的 图 片 是 
影片 两 位 主角 有 圭 加 在 电脑 屏幕 上 的 照片 。 它 并 不 能 营造 什么 神秘 感 ， 但 和 左边 
的 图 片 放 在 一 起 ， 神 秘 感 油 然而 生 。 

HOME ABOUT TRAILER SCREENINGS CAST CREW CONTACT 


MARIA JASON RUFUS AMY 
BELLO PATRIC SEWELL BRENNEMAN 


STRAND RELEASING PRESENTS A FILM BY JOHAN RENCK 


DOWNLOADING NANCY 


+ gun 


THE MOST CONTROVERSIAL FILM 
YOU. WILL SEE THIS YEAR. 


(ois) 


IN SELECT THEATRES JUNE 5TH 


左边 的 图 片 是 一 双 高 举 的 手臂 ， 手 及 被 白色 的 粗 绳 所 拥 缚 。 横 跨 该 图 片 的 
是 一 段 血红 的 文字 “本 年 度 最 有 争议 的 影片 ”。 


® (FRA) (Downloading Nancy) 是 一 部 2008 年 上 映 的 惊悚 片 ， 讲 述 了 对 生活 心 生 厌倦 
的 家 庭 主 妇 南 希 很 想 结束 自己 的 生命 te 的 陌生 人 来 杀 掉 自己 ， 
结果 两 人 见面 后 险 和 爱河 的 故事 。 


图 7-4 
影片 (下 载 南 希 》 
的 初始 页 
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这 些 图 片 组 合 起 来 营造 了 一 种 情绪 一 一 很 难说 明 ， 但 颇 为 黑暗 。 那 段 文 字 
推动 了 这 种 情绪 ， 但 就 算 没有 它 ， 整 个 页 面 仍然 能 唤起 孤独 和 绝望 ， 充 满 了 怪 
诞 与 神秘 。 


实际 上 ， 初 始 页 的 作用 比 其 表象 要 更 为 深刻 。 它 不 仅 是 为 了 劝说 用 户 深 入 
了 解 一 一 运用 少量 心理 学 技巧 也 能 做 到 这 一 点 。 该 页 面 其 实 是 要 唤起 访问 者 足 
够 的 情感 ， 使 他 们 对 影片 产生 反应 ， 从 而 做 出 决定 。 使 他 们 充分 地 领悟 页 面 传 
达 的 信息 ， 与 故事 产生 联系 ， 从 而 产生 身 临 其 境 的 感觉 。 此 举 能 让 访问 者 以 主 
观 角 度 进 行 体验 ， 与 营销 手段 和 设计 好 坏 无 关 。 不 论 是 黑暗 、 阴 郁 还 是 明亮 、 
轻快 ， 用 户 下 意识 的 反应 才 是 最 关键 的 ， 直 接 影 响 到 他 们 是 否 愿 意 为 影片 投入 ， 
不 管 是 在 情感 上 还 是 在 金钱 上 。 


从 根本 上 说 ， 电 影 网 站 只 为 那些 希望 了 解 更 多 的 人 而 存在 。 但 是 他 们 打开 
了 网 页 浏览 器 以 后 ， 就 得 看 设计 师 是 否 有 能 力 触 发 正确 的 响应 了 。 初 始 页 就 是 


这 样 一 种 途径 。 
732 引子 /预告 片 


在 框架 体系 中 ， 并 不 是 每 一 个 元 素 都 适用 于 所 有 项 目 ， 因 此 设计 师 需要 自 
行 挑 选 合适 的 元 素 ， 以 便 进行 试验 。 有 些 元 素 是 必需 的 ， 有 些 则 未 必 。 这 需要 
设计 师 发 挥 自 己 的 聪明 才智 来 进行 取舍 ， 哪 些 应 当 保 留 ， 哪 些 又 应 当 抛 弃 。 爹 
弃 某 些 元 素 并 不 会 造成 不 良 后 果 。 


但 预告 片 不 在 此 列 。 


和 本 章 开 篇 所 描述 的 《星际 迷航 》 的 预告 片 一 样 ， 所 有 电影 网 站 上 预告 片 
的 目的 都 是 为 了 说 服 。 预 告 片 的 步调 、 节 奏 、 结 构 和 强度 都 会 极 大 地 影响 潜在 
观众 对 影片 的 印象 。 它 们 的 重要 程度 类 似 于 在 网 上 买 车 时 浏览 的 照片 (不 过 预 
告 片 通 常 趣味 性 更 强 )。 坦 白 说 ， 如 果 一 个 电影 网 站 没有 提供 预告 片 ， 必 将 是 一 
个 严重 的 失误 。 简 而 言 之 ， 预 告 片 是 电影 网 站 中 最 为 重要 的 元 素 。 


虽然 说 Web 设计 师 并 不 会 参与 影片 的 预告 片 制作 ， 但 他 们 的 设计 无 疑 会 影 
响 到 预告 片 的 表现 力 ， 从 而 影响 到 用 户 除 预告 片 之 外 的 完整 体验 。 访 问 者 不 仅 
需要 能 轻松 地 发 现 视频 ， 其 过 程 也 需要 引人入胜 。 换 名 话说 ， 预 告 片 本 身 有 其 
影响 力 ， 包 含 它 的 页 面 也 同样 如 此 。 

有 趣 的 是 ， 很 少 有 站 点 能 够 意识 到 这 一 点 ， 更 谈 不 上 独到 的 发 挥 。 大 多 数 
电影 网 站 只 是 简单 地 把 预告 片 放 在 首页 上 《也 许 是 为 了 确保 人 们 能 够 看 到 )， 或 
者 放 在 一 个 单独 的 页 面 上 ， 上 面 除了 预告 片 几乎 什么 也 没有 。 


7.9 构成 元 素 


我 们 从 对 电影 网 站 进行 的 研究 中 得 知 ， 把 预告 片 置身 于 一 个 强烈 的 视觉 环 
境 下 是 一 种 不 同 寻常 的 举动 ， 但 这 其 实 是 一 种 很 好 的 想法 。 唤 起 用 户 感 官 上 的 
响应 有 助 于 塑造 品牌 印象 ， 而 且 它 是 设计 师 们 努力 争取 的 末 誉 。 这 是 一 个 非常 
明显 的 增强 效果 的 机 会 ， 如 有 果 错 失 难 免 令 人 扼 有 抠 。 有 了 图 像 和 效果 营造 起 的 情 
绪 作 为 背景 ， 预 告 片 反而 能 够 给 人 留 下 更 为 强烈 的 印象 。 


比如 说 ， 影 片 《 拆 弹 部 队 》2 Cwww.thehurtlocker-movie.com) 以 一 位 爆破 
专家 为 中 心 ， 他 在 战争 中 从 事 惊 险 的 拆 弹 工作 。 在 网 站 上 ， 预 告 片 的 背景 图 片 
是 电影 中 的 一 幅 剧照 ， 一 条 浓 烟 弥漫 的 街道 ， 如 图 7-5 所 示 。 这 足以 表现 网 站 
的 视觉 主题 ， 但 设计 师 又 更 上 一 层 楼 。 在 预告 片 播放 的 时 候 ， 屏 幕 中 会 不 断 漂 
浮 着 不 明 的 物体 碎 悄 ， 吾 造 出 一 种 爆炸 刚 发 生 过 的 区 败 感 。 这 些 燃 烧 过 的 碎 悄 
很 难 辨 认 ， 也 许 是 某 份 机 密 文 件 ， 或 者 是 某 个 四 岁 孩 童 的 涂 猩 ， 或 者 是 军车 中 
的 地 图 。 但 这 些 并 不 重要 ， 重 要 的 是 在 播放 过 程 中 碎 悄 一 直 在 场景 中 浮沉 ， 使 
用 户 感觉 到 预告 片 中 一 直 预 示 的 事情 一 一 拆 弹 失误 后 的 爆炸 一 一 这 确实 会 在 影 
片 中 发 生 ， 从 而 为 故事 的 结局 留 下 悬念 。 我 们 的 英雄 会 不 会 因此 而 残疾 ?会 不 
会 死去 ? 是 否 有 战友 为 掩护 他 而 牺牲 ， 徒 留 他 在 余生 里 空 翡 切 ? 
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© HARRA) (The Hurt Locker) 是 一 部 2009 年 上 映 的 美国 战争 片 。 剧 情 以 美 伊 战 争 为 背景 ， 
讲述 了 一 个 美国 陆军 拆 弹 部 队 成 员 的 故事 。 本 片 在 2010 年 第 82 届 奥 斯 卡 颁奖 典礼 上 宫 括 
了 最 佳 影片 、 最 佳 导演 等 六 项 大 奖 ， 一 举 击败 了 呼声 极 高 的 《 阿 几 达 》(4vatar)。 


图 7-5 

影片 《 拆 弹 部 队 》 
的 网 站 使 用 了 能 演 
染 情 绪 的 微妙 视觉 
效果 


无 论 何 种 结局 都 令 人 不 安 。 这 一 简单 的 视觉 效果 增强 了 预告 片 所 要 表现 的 
TERESA AMAZE I o 

如 果 你 准备 花 大 钱 制 作 一 部 好 电影 、 一 部 好 预告 片 ， 不 妨 再 多 花 一 点 点 在 
预告 片 的 展现 方式 上 。 小 投入 会 换 来 大 回报 。 


7.8.8 演 职 员 名 单 


演 职 员 名 单 就 是 电影 网 站 的 “关于 我 们 ” 这 一 部 分 往往 只 包括 影片 中 最 
要 的 人 物 的 资料 ， 例 如 


fie 


影星 、 导 演 ， 等 等 。 信 息 通 常 只 有 一 栏 ， 或 者 分 为 两 栏 : 


一 栏 是 演员 ， 男 一 栏 是 职员 。 演 职员 名 单 的 重要 等 级 不 如 预告 片 ， 但 由 于 这 些 
相关 人 士 可 能 是 极 大 的 卖点 ， 因 此 它 绝 不 是 次 要 信息 。 


尽管 如 此 ， 很 少 有 网 站 真正 重视 这 一 信息 的 美学 效果 ， 而 且 认为 理所当然 。 


= 


只 不 过 是 一 系列 指向 个 人 资料 的 名 字 而 已 ， 还 需要 像 其 他 部 分 一 样 体现 网 站 的 


主题 吗 ? 也 许 完全 不 需要 。 但 其 实 演 职员 页 面 同样 可 以 完美 地 融入 到 网 站 中 。 


在 StarTrekMovie.com 上 ， 你 可 以 在 About 


| 


栏 中 找到 演 职 员 信息 ， 不 过 


其 中 也 包括 了 故事 梗概 〈 在 下 一 节 将 会 讨论 ) 和 拍摄 手记 。 不 过 更 有 趣 的 是 ， 
About 是 整个 网 站 里 唯一 带领 访问 者 进入 进取 号 星 舰 控制 中 心 的 地 方 ， 这 里 是 
全 舰 最 为 《星际 迷航 》 影 迷 们 所 熟知 的 场景 。 这 一 事实 使 About 部 分 更 加 吸引 
人 ， 散 发 着 迷人 的 魅力 。 它 建立 在 用 户 的 网 站 空间 感 的 基础 上 ， 而 不 是 仅仅 提 
供 一 个 列表 。About 部 分 不 只 是 一 个 网 页 而 已 一 一 它 是 整个 星 舰 参观 过 程 中 的 


一 个 重要 环节 ， 是 进取 号 的 见面 会 《参见 图 7-6)。 
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图 7-6 


JOHN CHO (Sulu) continues to prove himself as one 
of today’s most gifted actors, delivering compelling 
performances in both comedy and drama. Cho first 
caught the public's attention in the 1999 breakthrough 


hit comedy “American Pie,” in which he popularized 
the slang term “MILF.” In 2004, Cho starred as Harold 
Lee opposite Kal Penn in the cult comedy “Harold & 
Kumar Go to White Castle" for New Line Cinema. In 
April 2008, Cho reprised his role for the highly 
anticipated follow-up “Harold & Kumar Escape from 
Guantanamo Bay,” a film hailed by Daily Variety as 


StarTrekMovie.com 的 About 部 分 带领 


户 前 往 


一 直 以 来 都 有 人 说 ， 一 部 影片 的 电梯 陈述 〈 在 好 莱 坞 也 被 称 为 logline) 决定 
了 该 片 能 和 否 找到 投资 人 。 如 果 在 20 秒 钟 内 无 法 让 人 相信 这 部 电影 会 大 卖 ， 那 么 它 
就 可 能 会 前 景 惨淡 。 故 事 梗概 必须 有 趣 、 引 人 入 胜 ， 这 样 才 能 吸引 人 们 的 注意 


在 影片 《自力 更 生 》?2 Gwww.childrenofinvention.com) 的 网 站 上 “〈 如 图 7-7 
PAS), About 部 分 的 开头 是 这 么 一 行文 字 : 


图 7-7 
INVENTION Sore 
站 的 电梯 陈述 干 
OFFICIAL SELECTION y 不 错 


2009 


SUNDANCE 


FILM FESTIVAL 


ABOUT 


Two young children living outside Boston are left to fend for themselves 
when their mother gets embroiled in a pyramid scheme and disappears. 


After being evicted from their home, the Cheng family finds that times are tighter than 
ever. Hardworking single mom and recent Boston transplant Elaine tries desperately 
to find the means to support her young children, Raymond and Tina. They squatin a 
model apartment in an unfinished bullding, but try to maintain a normal life. Elaine 
Juggles a number of jobs, including working for a questionable pyramid scheme. 
Meanwhile, Raymond and Tina become latch-key kids and find amusement in 
building childish inventions. When Elaine doesn't return home one night, things take a 
turn for the worse. Nobody knows the kids are home alone, and they are left to fend for 
themselves. As the days pass, Raymond realizes he needs to come up with a plan to 
take care of his little sister. 


Based on Tze Chun's own award-winning short film, WINDOWBREAKER, which 
screened at the 2007 Sundance Film Festival, CHILDREN OF INVENTION is a drama 
aboutthe influence of an adult world on children, the immigrant mentality, and 
shortcuts to the American dream. 


故事 梗概 : 两 个 住 在 波士顿 郊区 的 年 幼小 孩 在 母亲 陷入 传销 骗局 并 失踪 后 
不 得 不 学 会 照顾 自己 。 


® (HJJSE/E) (Children of Invention) 是 一 部 2009 ^E ERIS Fr, 28$84E AAT IAS. TE 
影片 中 ， 一 位 单身 移民 母亲 带领 一 双 儿 女 在 贫困 中 挣扎 ， Mo 影响 到 孩子 原本 天 
真 烂漫 的 童年 ， 使 年 幼 的 哥哥 带 着 妹妹 在 对 未 来 美好 生活 的 梦想 中 ， 开 始 利用 自己 的 小 发 
明 去 发 财 致富 。 该 片 荣 获 奥 斯 汀 亚 美 电影 节 有 史 以 来 第 一 个 AWM 远见 奖 最 佳 影片 奖 。 
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这 是 我 们 在 研究 了 20 多 个 网 站 之 后 ， 找 到 的 唯一 一 个 真正 掌握 电梯 陈述 精 
髓 的 网 站 。 其 中 大 多 数 网 站 的 故事 梗概 都 有 好 几 段 文字 ， 而 且 必须 全 部 读 完 
攻 理 解 影片 的 主 旧 。 而 《自力 更 生 》 的 文案 作者 则 直达 主题 。 这 也 许 正 是 该 片 
E 够 一 举 拿 下 制 片 合同 的 原因 。 


影片 的 故事 梗概 是 一 个 电影 网 站 中 的 重要 信息 ， 因 为 它 和 预告 片 一 起 揭示 
了 影片 的 主要 故事 情节 ， 并 且 劝 说 人 们 深入 了 解 。 用 户 从 故事 梗概 中 领会 到 的 情 
节 和 影片 主题 应 该 和 看 了 预告 片 的 效果 一 样 ， 即 使 这 个 过 程 中 可 能 没有 任何 音乐 。 


当然 在 这 里 我 们 也 完全 可 以 使 用 几 段 文字 ， 但 如 果 把 故事 浓缩 一 到 两 行 ， 
有 助 于 人 们 迅速 判断 自己 是 否 有 兴趣 继续 看 下 去 。 此 外 ， 对 待 离 去 用 户 的 方式 
与 对 待 那些 留 下 的 用 户 的 方式 同样 重要 。 电 影 网 站 的 受众 群体 包括 那些 观 影 
数 的 人 ， 还 有 关注 演 职 员 信息 、 制 片 公 司 、 编 剧 作者 等 各 种 细节 的 狂热 爱好 者 ， 
避免 耽误 他 们 的 时 间 是 至 关 重 要 的 。 对 影片 的 一 句 话 概括 能 让 这 些 人 感觉 受到 
了 尊重 。 就 算是 在 潜意识 里 ， 他 们 也 会 记 住 你 所 做 的 。 而 积极 的 体验 带 来 的 正 
是 积极 的 印象 。 


任何 一 个 网 站 项 目 都 应 该 包括 一 个 好 的 文案 作者 。 在 有 些 网 站 上 ， 某 段 文 
字 可 能 会 成 为 用 户 做 出 承诺 的 决定 性 因素 ， 那 么 有 一 个 好 的 文案 则 更 为 重要 。 
7.4 设计 标准 

虽然 说 StarTrekMovie.com 的 品质 不 俗 ， 但 它 其 实 也 只 是 做 了 和 其 他 电影 
网 站 大 致 相同 的 事情 。 当 你 只 需要 做 一 件 事 ， 而 且 有 许多 方法 都 能 做 好 的 时 候 ， 
你 就 不 会 再 寻找 新 的 方法 。 大 多 数 电影 网 站 的 大 部 分 设计 师 都 停止 了 这 种 寻找 。 
但 这 恰恰 是 他 们 的 失败 之 处 。 虽 然 说 电影 工业 有 很 大 的 创新 空间 ， 但 大 部 分 电 
影 网 站 的 设计 和 结构 在 很 多 都 已 经 沦 为 流水 线 作 业 。 许 多 设计 师 稳 坐 于 一 套 行 
之 有 效 的 素材 集 之 上 吃 着 老 本 ， 不 再 挖掘 新 的 想法 和 创意 。 事 实 上 ， 这 就 好 像 
有 一 群 电影 网 站 的 设计 高 手 ， 搭 建 起 了 所 有 这 些 元 素 ， 然 后 就 因为 厌倦 而 停滞 
不 前 了 。 显 然 ， 就 算是 强调 体验 的 电影 网 站 ， 如 果 每 个 项 目的 需求 都 是 一 样 的 
话 ， 人 们 的 工作 激情 也 会 很 快 就 消失 殖 尽 。 


但 如 果 我 们 详 察 电 影 网 站 的 设计 标准 ， 就 能 直抵 核心 ， 了 解 它 真正 想 要 达 
到 的 目的 ， 从 而 着 手 考虑 新 的 实现 方法 。 


在 新 港 海 滩 " 那 次 UIE 网 页 应 用 开发 峰会 上 ，Robert 举办 过 一 个 有 关 交 互 
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O 新 港 海滩 (Newport Beach) 位 于 加 利 福 尼 亚 州 ， 是 度假 胜地 。 


设计 框架 体系 的 讲座 。 其 中 的 一 个 练习 把 参加 者 分 成 了 4 组， 每 一 组 都 被 指定 
为 不 同 的 网 站 类 型 : 金融、 高 等 教育 、 摄 影 图 库 和 电影 网 站 。 之 后 每 一 组 要 找 
出 各 自分 类 下 的 网 站 ， 研 究 并 找 出 共性 ， 并 以 该 类 型 网 站 的 框架 为 基础 制订 出 
一 系列 设计 标准 ， 最 后 进行 脑力 风暴 ， 找 到 新 的 解决 方案 。 


以 下 设计 标准 都 出 自 于 当天 电影 网 站 团队 的 总 结 


qa] 


对 任何 电影 网 站 来 说 ， 第 一 职责 就 是 要 结合 广告 企划 为 电影 建立 起 良好 的 
声誉 。 有 几 种 方法 可 以 做 到 这 一 点 


首先 ， 引 用 来 自 评论 家 和 媒体 〈 报 纸 、 杂 志 等 ) 的 正面 评论 会 非常 有 效 ， 
因为 此 法 利用 了 社会 心理 学 中 的 “权威 ”原则 ， 即 人 们 通常 愿意 相信 领域 内 的 
专家 之 言 ， 如 图 7-8 所 示 。 电 影评 论 家 的 职责 是 评判 一 部 影片 的 品质 ， 并 表述 
观点 以 便 观 众 判断 是 否 值得 一 看 。 正 因为 如 此 ， 人 们 认为 电影 评论 家 是 该 领域 
的 专家 ， 值 得 信任 ， 是 提供 建议 的 可 靠 来 源 。 


ewswe 图 7-8 

N ek nee 的 评论 
WAY COOL" 比较 有 来 头 , 可 

online buzz / more reviews... 以 影响 访问 者 


尽管 如 此 ， 仍 有 很 多 人 并 不 相信 评 ; oo 


家 总 是 会 反对 他 们 的 看 法 ， 但 其 实 他 们 的 看 法 才 是 代表 大 众 的 。 能 够 娱乐 
无 数 人 的 喜剧 ， 却 可 能 因为 不 够 高 雅 而 入 不 了 评论 家 们 的 法 眼 ， 对 意见 
很 可 能 会 与 影迷 们 的 观点 大 相 径 庭 。 此 外 ， 媒 体 的 引用 天 生 就 带 有 偏 面 性 ， 因 
为 营销 人 员 很 少 会 开心 地 四 处 散布 不 好 的 评论 。 最 后 ， 这 种 引用 往往 会 断 章 取 
义 “ 例 如 从 某 篇 全 面 评论 中 截取 一 小 段 话 )， 这 使 得 它们 带 有 误导 性 。 


因此 ， 虽 然 媒 体 引 用 无 疑 会 带 来 一 些 帮 助 〈 尤 其 是 那些 声誉 良好 的 媒体 ， 
或 者 见 多 识 广 的 评论 家 所 评论 的 获奖 级 影片 )， 但 仅 靠 它们 是 明显 不 够 的 。 


— 


he » 


预告 片 如 果 剪 辑 良好 ， 将 具有 极 大 的 说 服 力 ， 哪 怕 是 那些 日 后 会 得 到 糟糕 
反馈 的 影片 也 是 如 此 。 但 是 正如 我 们 之 前 所 谈 到 的 ， 设 计 师 很 难 对 预告 片 加 以 
控制 。 很 明显 ， 在 这 个 拼图 中 网 站 设计 师 唯一 能 填 人 《而 且 真 正 产生 影响 ) 的 
一 块 ， 只 能 是 网 站 的 设计 。 因 此 ， 设 计 师 所 能 做 到 的 最 好 情况 ， 就 是 把 预告 片 
放 在 精心 设计 的 页 面 里 ， 疯 定 正确 的 感情 基调 ， 确 立 在 整个 网 站 设计 中 所 表现 
的 主题 ， 并 且 运 用 他 们 良好 的 判断 力 来 选择 合适 的 音乐 、 视 觉 效 果 和 背景 。 


有 些 影 片 的 演 职 员 和 名 单 较为 惹 人 注目 ， 这 同样 也 具有 很 大 的 说 服 力 ， 应 当 
予以 强调 。 如 果 名 单 中 包括 有 影视 红星 ， 也 就 是 那些 光彩 夺目 的 著名 男女 演员 ， 
人 们 就 会 自然 而 然 地 相信 这 部 电影 肯定 值得 一 看 。 大 名 里 易 的 导演 或 制 片 人 也 
有 这 种 影响 力 。 比 如 ， 克 林 特 。 伊 斯 特 伍德 "不 仅 由 于 高 超 的 演技 而 声名 远 播 ， 
同时 他 执导 和 制 片 的 电影 也 广 受 好 评 。 在 电影 网 站 上 只 要 出 现 他 的 名 字 就 足以 
证 用 户 跃 跃 欲 坛 了 。 如 果 影 片 中 有 重要 的 明星 参与 ， 最 明智 的 做 法 就 是 把 他 们 
的 名 字 、 照 片 等 信息 放 在 最 突出 的 位 置 ， 如 图 7-9 所 示 。 
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当然 ， 任 何 营 销 技巧 都 比 不 上 来 自 朋 友 的 推荐 。 电 影 网 站 的 设计 师 们 可 以 
利用 这 一 点 来 达到 更 好 的 效果 。 如 果 你 希望 某 人 马上 对 一 部 电影 产生 兴趣 ， 那 
就 要 确保 他 能 从 朋友 那里 听 说 到 它 。 


7.4.2 ”实现 口 口 相传 的 营销 
社会 心理 学 中 还 有 一 条 “相似 ”原则 ， 指 出 人 们 有 种 强烈 的 趋向 ， 更 愿意 


A o e N D AMI OS Zuge A. WIE 
演 过 44 部 ， 被 塑造 成 颇具 代表 性 的 银幕 铁汉 。1970 年 起 他 开始 转型 成 为 专业 的 电影 
演 ， 执导 了 超过 25 部 影片 。1992 年 以 《不 可 饶恕 》(Unforgiven) 一 片 获 得 了 生平 第 一 个 奥 
斯 卡 最 佳 导演 奖 ，2005 年 以 《 百 万 宝贝 》(CMillion Dollar Baby) 一 片 赢 得 第 77 届 奥 斯 卡 最 
佳 导 演 奖 。 

Q 图 中 所 示 为 影片 《姐姐 的 守护 者 》(CMy Sisters Keeper)， 突 出 了 主演 卡 梅 隆 。 迪 亚 茨 。 这 部 

影片 于 2009 年 6 月 上 映 ， 取 材 自 同名 畅销 小 说 ， 讲 述 了 小 女孩 安娜 提出 控告 ， 认 为 父母 生 

下 她 只 是 为 了 给 身 患 白 血 病 的 姐姐 提供 活 下 去 的 机 会 ， 但 安娜 的 做 法 背后 其 实 隐藏 着 惊人 
的 秘密 。 


去 尊重 那些 看 上 去 与 自己 相似 的 人 的 意见 。 实 际 上 ， 这 条 原则 可 能 正好 解释 了 
亚马逊 多 年 来 为 什么 能 够 如 此 成 功 一 一 用 户 能 够 通过 “顾客 评论 ”来 收集 那些 
与 自己 品味 或 需求 相似 的 人 的 意见 ， 而 这 些 建议 将 会 极 大 地 影响 他 们 的 购买 意愿 。 


电影 工业 也 不 例外 。 没 错 ， 人 们 喜欢 娱乐 ， 但 要 他 们 选择 一 部 投入 2 小 时 
再 加 10 美元 的 影片 ， 需 要 的 是 更 深刻 的 洞察 ， 而 不 仅 是 对 娱乐 的 需求 。 这 正 是 
朋友 推荐 一 展 身手 之 处 。 口 口 相传 是 最 有 强大 的 营销 形式 ， 来 自 亲 朋 好 友 的 积 
极 评价 很 可 能 会 让 一 个 观望 者 播 身 变 为 消费 顾客 。 因 此 ， 共 享 和 网 络 化 的 解决 
方案 将 是 极为 有 效 的 工具 。 但 奇怪 的 是 ， 很 少 有 电影 网 站 能 利用 这 一 点 ， 即 使 
有 也 做 得 很 差 。 


比如 ， 影 片 《 万 圣 节 2) © Gwww.halloween2-movie.com) 在 网 站 上 提供 了 
该 片 的 官方 twitter 和 Facebook 页 面 的 链接 ， 如 图 7-10 所 示 。 这 似乎 是 一 个 好 
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© HÆ 2) (Halloween 2) 翻拍 自 1981 FX Es I Ade JÆ). GRIF 2009 年 
8 月 上 映 ， 由 摇滚 乐 手 Rob Zombie 执导 ， 讲 述 了 一 个 变态 杀手 在 万 圣 节 前 夕 逃 出 精神 病院 ， 
可 到 家 乡 大 开 杀 戒 的 恐怖 故事 。 


第 7 章 电影 网 站 


主意 ， 但 当 你 不 知道 它们 的 使 用 方法 时 ， 可 能 就 不 会 这 么 想 了 。 除 了 提供 一 个 
指向 社交 网 站 的 资料 页 之 外 ， 这 些 选 项 没有 其 他 作用 。 它 们 要 想 获得 注意 ， 应 
该 做 的 是 创建 使 这 些 信 息 口 口 相传 的 途径 。 网 站 除了 链接 到 twitter 之 外 ， 还 可 
以 为 用 户 提供 一 个 预先 写 好 的 信息 ， 例 如 :“《 万 圣 节 2》 就 要 在 8 月 28 日 上 
映 ， 我 都 等 不 及 了 ! http://www.halloween2-movie.com。” 这 样 他 们 只 需 一 次 点 
击 就 能 在 自己 的 twitter 账号 中 发 表 ， 与 自己 的 跟随 者 一 同 分 享 对 影片 的 激动 之 
情 。 此 举 能 够 为 用 户 提 供 一 个 参与 的 切入 点 ， 让 信息 迅速 传播 开 来 ， 而 且 这 一 
切 只 需要 点 击 一 个 按钮 即 可 。 


对 于 那些 拥有 博客 或 者 MySpace 主页 的 用 户 ， 网 站 可 以 提供 便利 让 他 们 在 
自己 的 博客 文章 中 代入 电影 预告 片 ， 从 而 与 朋友 和 读者 们 分 享 。 另 一 种 选择 就 
是 提供 影片 角色 的 头像 给 用 户 下 载 ， 作 为 自己 在 社交 网 站 中 的 形象 。 类 似 这 样 的 
可 能 性 有 很 多 ， 其 中 绝 大 多 数 都 不 需要 特别 的 付出 ， 但 却 可 能 带 来 丰厚 的 回报 。 


在 Robert 的 讲座 中 ， 与 会 者 们 提出 了 另 一 个 很 棒 的 想法 : 他们 建议 尝试 一 
种 快速 平面 宣传 策略 。“ 九 寸 钉 ”乐队 "曾经 为 了 他 们 的 一 张 唱片 造势 ， 把 相关 
言 息 〈 明 信 片 、 贴 纸 等 ) 放 在 各 种 公共 场所 ， 例 如 乐队 歌迷 经 常 关 顾 的 一 些 酒 
吧 的 洗手 间 。 那 些 发 现 线索 的 人 欣喜 若 狂 。 此 举 为 该 唱片 赚 足 了 嗪 凑 ， 引 发 了 
爆炸 式 的 热 议 ， 造 就 了 一 个 瘤 焊 的 营销 经 典故 事 。 而 最 棒 的 是 ， 它 说 明 尽管 本 
书 的 重点 谈 的 是 网 页 解剖 学 ， 但 网 络 并 不 是 永远 的 答案 。 


74.3 让 他 们 感 兴 


自然 ， 要 想 让 用 户 分 享 他 们 对 影片 的 兴奋 之 情 ， 电 影 网 站 首先 得 让 他 们 感 
兴趣 。 它 们 必须 能 触发 情感 ， 通 过 某 种 方式 与 用 户 取得 心灵 上 的 联系 。 只 要 做 
到 了 这 一 点 ， 就 可 以 坐等 用 户 乞 求 更 多 了 。 


福克斯 探照灯 似乎 没有 意识 到 这 一 点 。 网 站 上 的 内 容 都 以 模板 显示 ， 而 每 
部 影片 的 模板 都 大 同 小 异 ， 而 且 用 色 颇 为 素 淡 ， 此 举 是 为 了 减弱 与 Flash 部 分 
色调 的 对 比 。 模 板 通 常 分 为 两 列 ， 灰 色 的 背景 加 上 黑色 的 文本 。 大 量 的 文本 。 
这 样 的 页 面 上 根本 没有 任何 激动 人 心 的 东西 ， 如 图 7-11 所 示 。 

而 另 一 方面 , 《星际 迷航 》 的 网 站 则 满 是 令 人 着 迷 的 图 像 和 视觉 特效 ， 以 及 
如 潮水 般 绵 延 不 绝 的 背景 音乐 ， 用 户 就 像 乘 坐 云 示 飞 车 一 样 充 满 了 快感 。 此 外 
还 有 一 个 图 片 陈列 馆 ， 里 面 有 40 余 幅 来 自 影片 的 截图 。 


@“ 九 寸 钉 ”(Nine Inch Nails) 是 一 支 1989 年 成 立 的 美国 著名 重金 属 播 滚 乐 了 从， 乐队 的 固定 成 
员 只 有 创始 人 Trent Reznor 一 人 。 


7.4 设计 标准 


MEET THE CAST 

THE INSIDE SCOOP 
Hugh Dancy (Adam) 

View the Official Poster for ADAM 
Peter Gallagher (Marty) ADAM opens July 29th. 


Rose Byrne (Beth) About ADAM: What Is Asperger's? 

In ADAM, Hugh Dancy's title character has Asperger's. Don't know 
Amy Irving (Reb ) what it is? Find out the basics here. 
(500) DAYS and ADAM Hit the Festival Circuit 
The two movies have only just begun their rounds among festivals 
across the country - get the deets here. 


Frankie Faison (Harlan) 


MEET THE CREW VIDEO: Meet the Talent Behind Our Summer Films! 

Nia, Joseph, Zooey, Max and Zach are just a few of the creative 
Max Mayer (Director, Writer) forces behind Fox Searchlight's films this summer. 
Leslie Urdang (Producer) Fox Searchlight Acquires ADAM - Read Its Reviews! 

Beth, a brainy, beautiful writer, encounters Adam, a handsome but 
Miranda De Pencier (Producer) odd fellow whose awkwardness is perplexing... 


Dean Vanech (Producer) 

NEWS & REVIEWS 
Gary Guidice (Co-Producer) 

"Hugh Dancy Channels His Inner ADAM," Shows Up In ... 
Geoff Linville (Co-Producer) 

Edinburgh International Film Festival's Closing Ga... 
Dan Revers (Exec. Producer) 

Romance: It's a Summer Of Love, Too: During the Su... 
Christina Weiss Lurie (Exec. Producer) 

Newport Beach Film Festival Goes Big: Over the Cou... 


RELATED LINKS Max Mayer Helmed & Penned Comedy-drama ADAM, Starr... 
Wikipedia On Asperger Syndrome How to Choose a Date Movie (Hint: No Explosions) N... 
NIH: Asperger Syndrome Fact Sheet Summer Movie Season Is a Bit Like Summer Vacation ... 


除了 这 些 之 外 ， 网 站 放出 了 3 段 不 同 的 预告 片 、12 个 电视 剧 集 的 预告 。 如 
果 这 还 不 够 引起 用 户 的 兴趣 ， 那 么 还 有 8 个 截取 自 真正 影片 的 片段 。 


这 条 标准 非常 清晰 、 明 显 ， 而 且 简 单 。 
引起 人 们 的 兴趣 ， 并 保持 住 ! 
7.4.4 融入 他 们 的 生活 


讲座 的 参加 者 们 还 发 现 了 一 eae ne ee diente ae ee 
会 帮助 影迷 把 电影 融入 自己 的 生活 。 最 常见 的 做 法 就 是 提供 与 影片 相关 的 桌面 
壁纸 ， 如 图 7-12 所 示 ， 但 其 实 我 们 还 


网 站 还 可 以 为 使 用 智能 手机 的 人 提供 桌面 壁纸 一 一 也 就 是 类 似 苹果 iPhone 
这 样 的 手机 的 壁纸 。 影 片 角色 的 头像 可 以 少量 发 放 给 用 户 ， 作 为 他 们 社交 网 站 
的 形象 。 还 可 以 销售 T 恤 衫 和 海报 。 访 问 者 可 以 定制 明信片 ， 然 后 邮寄 给 亲朋 
好 友 。 小 孩 可 以 打印 出 他 们 最 喜爱 的 Pixar 角色 的 彩色 图 案 。 网 站 还 可 以 提供 
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手机 铃声 下 载 。 想 象 一 下 ， 当 你 的 老板 给 你 电话 时 响起 的 是 《万 圣 节 》 的 主题 
音乐 ， 绝 对 令 人 莞 尔 。 

但 你 也 许 会 问 ， 做 这 么 多 附加 的 工作 ， 投 资 的 回报 在 哪里 ?对 于 电影 人 来 
说 ， 他 们 得 到 的 是 忠诚 。 这 是 商业 销售 之 外 的 收益 ， 是 让 影片 的 演员 们 成 为 更 
红 的 明星 的 机 会 。 这 意味 着 很 多 。 

而 另 一 方面 ， 对 于 观众 来 说 则 意味 着 更 多 。 这 有 助 于 他 们 从 自己 热爱 的 事 
物 中 获得 认同 感 。 有 助 于 他 们 显得 与 众 不 同 。 有 助 于 他 们 披 上 某 个 虚构 角色 的 
外 衣 ， 做 做 白 日 梦 。 有 助 于 他 们 站 在 另 一 个 角度 来 看 待 这 个 世界 。 

而 这 就 是 用 户 体验 ! 
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Piet RARLA 


许 你 从 未 仔细 考虑 过 前 面 5 草 中 描述 的 那些 元 素 。 或 者 也 许 你 一 直 以 来 都 
秉承 自己 的 那 一 套 ， 也 从 未 回头 检查 过 。 无 论 是 哪 一 种 情况 ， 你 都 可 能 已 
经 错过 了 机 会 。 如 果 你 从 未 仔细 研究 过 注册 表单 的 设计 ， 那 么 这 一 块 的 完整 程 
度 就 可 能 低 于 你 的 预期 。 如 果 你 多 年 前 开发 了 一 种 处 理 搜索 系统 的 方法 ， 从 此 
再 没有 重新 审视 过 ， 那 么 你 的 搜索 系统 可 能 已 经 无 法 再 满足 当前 的 目标 。 


不 断 用 罗 新 的 眼光 来 审视 交互 元 素 ， 这 一 点 非常 重要 。 和 希望 我 们 在 各 个 框 
架 中 讨论 的 设计 标准 已 经 在 此 方向 对 你 有 所 推动 。 请 不 要 认为 我 们 是 在 这 里 横 
加 批评 ， 正 相反 ， 我 们 和 其 他 人 一 样 容易 落 入 陈旧 思维 的 陷阱 。 简 言 之 ， 我 们 
很 容易 遗忘 这 些 死 板 的 基础 性 交互 ， 很 难 对 它们 加 以 应 有 的 思考 。 而 这 看 起 来 
是 事 出 有 因 。 


设计 师 总 会 面临 一 些 难以 解决 的 烦恼 ， 而 且 它 们 彼此 有 着 直接 的 关联 。 第 
一 ， 很 多 人 发 现 他 们 不 断 地 设计 同样 的 几 个 元 素 : 联系 表单 、 搜 索 界 面 、“ 关 于 
我 们 ”界面 、 目 录 结 构 、 注 册 元 素 、 账 户 管理 界面 ， 等 等 。 哪 人 是 刚 到 手 的 新 
项 目 ， 这 个 列表 看 上 去 也 和 之 前 的 完全 相同 。 第 二 ， 这 些 元 素 里 面 的 绝 大 多 数 
都 非常 乏味 。 而 更 糟糕 的 是 ， 它 们 在 项 目 中 耗费 的 时 间 是 最 长 的 。 


是 互联 网 设计 已 经 停滞 不 前 了 吗 ? 不 太 可 能 。 每 一 个 项 目 都 会 带 给 我 们 为 
之 兴奋 的 新 人 、 新 事物 和 新 的 挑战 。 是 设计 流程 已 经 变 成 了 例行公事 ? 这 
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必 ， 因 为 许多 设计 师 ， 尤 其 是 那些 为 多 个 客户 工作 的 设计 顾问 ， 在 职业 生涯 中 
可 能 会 接触 上 百 个 项 目 ， 但 从 未 见 过 哪 两 个 项 目 看 上 去 非常 雷同 的 。 那 么 为 什 
么 要 设计 的 元 素 都 这 么 相似 呢 ? 事实 证 明 ， 绝 大 多 数 项 目 实际 上 仍 有 不 少 共 同 
点 。 


对 每 一 个 项 目 而 言 ， 设 计 师 都 会 就 各 方面 给 出 相似 的 建议 ， 例 如 表单 的 设 
计 、 错 的 处 理 、 全 局 导航 的 结构 以 及 位 置 、 搜 索 的 位 置 以 及 流程 ， 等 等 。 虽 然 
在 不 同 的 项 目 中 ， 设 计 师 会 “因地制宜 ” 根据 具体 情况 调整 细节 ， 但 在 更 高 层 
面 上 ， 占 据 主 导 地 位 的 依然 是 整体 的 设计 趋势 。 


框架 体系 之 所 以 能 够 成 为 设计 工作 中 的 标准 工具 ， 正 是 因为 它 适 用 于 这 些 
无 谓 耗 费 项 目 时 间 和 资源 的 枯燥 流程 ， 而 且 几 乎 无 需 思考 就 能 直接 派 上 用 场 。 
为 此 ， 我 们 希望 通过 为 框架 存档 备案 能 够 把 上 述 问 题 重 新 带 回 到 你 的 眼前 。 而 
且 通 过 留意 这 些 系统 背后 的 逻辑 依据 ， 对 你 能 有 所 启迪 ， 对 现 有 的 解决 方案 进 
行 重新 审视 和 改进 ， 同 时 尝试 创造 出 更 为 新 颖 的 方法 来 解决 已 存在 的 问题 。 


不 过 ， 要 想 达到 这 些 目的 ， 你 首先 必须 理解 如 何 标识 、 验 证 和 打造 框架 
(不 管 是 通用 的 框架 还 是 只 针对 于 某 一 系列 产品 的 框架 )， 同 时 还 要 了 解 如 何 共 
享 ， 以 便 最 大 程度 地 获得 它们 带 来 的 好 处 。 在 本 章 中 ， 我 们 将 讨论 这 些 问 题 。 


8.1 打造 你 的 框架 


我 们 在 第 7 章 曾 经 提 到 ，Robert 在 他 的 讲座 中 要 求 参 加 者 们 找 出 某 个 领域 
的 网 站 所 具有 的 共性 ， 并 且 记 录 这 些 元 素 为 其 制订 出 一 系列 设计 标准 ， 然 后 利 
用 脑力 风暴 得 到 应 用 这 些 标 准 的 方法 ， 以 求 最 终 设计 出 新 颖 的 解决 方案 。 而 这 
套 流程 ， 正 是 我 们 打造 一 个 框架 所 需 的 基本 途径 。 但 是 第 一 ， 时 间 上 不 允许 我 
们 随心 所 欲 地 选择 一 大 堆 系 统 进 行 存 档 备 案 ， 第 二 ， 在 标识 网 站 的 构成 元 素 时 ， 
我 们 也 不 一 定 愿意 费心 劳力 地 判断 应 该 选择 哪些 网 站 作为 分 析 资 料 。 我 们 需要 
的 是 捷径 ， 是 作 浆 码 ， 是 “了 不 起 ”的 解决 方案 。 


以 下 就 是 。 
8.1.1 标识 出 问题 


首先 ， 并 不 是 必须 事先 选择 好 框架 ， 我 们 才能 对 其 进行 记录 。 你 不 必 费 心 
寻找 框架 一 一 它们 会 找到 你 。 在 几乎 每 一 个 项 目 中 ， 都 有 一 系列 框架 坐等 被 你 
发 现 ， 而 你 所 要 做 的 只 是 注意 到 它们 ， 然 后 充实 它们 ， 让 该 方面 的 设计 能 够 在 
下 一 次 变 得 更 轻松 、 更 高 效 即 可 。 而 且 每 当 你 再 次 注意 到 这 个 框架 时 ， 都 可 以 
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往 里 面 加 入 更 多 的 细节 。 换 句 话说， 框架 一 般 不 会 在 转眼 间 就 变 成 完美 的 、 详 
尽 的、 完整 的 文档 落 到 你 的 手 里 。 在 一 开始 ， 它 们 就 像 一 些 模糊 不 清 的 列表 ， 
但 最 终 会 成 长 为 宝贵 的 资源 ， 拥 有 完整 的 案例 、 界 面 截 图 和 一 系列 启发 灵感 的 
设计 标准 。 

一 开始 ， 你 需要 找到 一 个 在 当前 和 其 他 项 目 中 可 能 都 需要 解决 的 问题 。 前 
面 5 章 包含 了 一 些 这 样 的 问题 ， 但 实际 的 范围 要 远 远 超过 本 书 〈 或 者 任何 一 本 
书 )。 你 会 在 无 数 的 网 站 上 发 现 搜索 、 目 录 、 关 于 我 们 以 及 其 他 框架 。 你 会 设计 
这 些 东西 无 数 次 。 如 果 有 一 个 问题 ， 设 计 师 需要 不 止 一 次 地 处 理 它 ， 那 么 它 就 
可 以 作为 框架 被 存档 和 备案 。 

我 们 描述 过 的 那些 框架 有 助 于 你 起 步 ， 但 它们 只 是 皮毛 而 已 ( 别 忘 了 ,我 
们 对 之 前 的 每 一 个 框架 都 钻研 颇 深 。 如 果 按 此 深度 写 上 20 个 框架 ， 这 本 书 可 能 
将 永 无 面市 之 日 )。 以 下 是 商务 网 站 项 目 中 你 可 能 会 遇 到 的 一 些 框架 。 


口 账户 管理 框架 : 用 于 管理 用 户 账户 的 元 素 一 一 登录 、 退 出 界面 及 其 导 
航 、“ 找 回 密码 ”的 任务 流程 、 改 变 或 重 置 密码 界面 、 更 新 用 户 E-mail 
地 址 、 付 款 信息 ， 等 等 。 

O 用 户 资料 框架 : 在 社交 环境 下 用 户 公 开 的 资料 信息 一 一 用 户 名 或 昵称 、 
形象 、 曾 发 表 的 评论 、 个 人 实际 信息 《例如 用 户 所 在 地 )， 以 及 他 们 推 
荐 或 者 加 入 愿望 清单 中 的 产品 列表 。 

口 购物 车 框架 : 在 付款 之 前 收藏 和 管理 用 户 的 采购 单 的 元 素 
表 、 价 格 、 总 计 金 额 等 。 

O 付款 框架 : 用 户 完成 购买 所 需 的 元 素 一 一 总 费用 、 送 货 选项 、 付 款 形 
式 、 确 认 付款 、 收 据 ， 等 等 。 

O 订单 管理 框架 管理 和 追踪 订单 的 元 素 一 一 发 货 状态 、 货 单 号 、 取 消 订 
单 选项 、 退 货 说 明 ， 以 及 客服 联系 方法 等 。 


除 此 之 外 ， 你 可 能 还 需要 搜索 、 关 于 我 们 ， 以 及 一 个 帮助 用 户 熟 悉 网 站 的 
导 问 性 框架 (页 首 、 导 航 、 网 站 标语 等 )。 当 然 ， 还 有 商务 网 站 中 最 不 可 或 缺 的 
目录 框架 。 


在 商务 网 站 的 设计 过 程 中 ， 当 你 开始 考虑 上 述 某 个 框架 (或 者 所 有 框架 ) 
所 支持 的 用 户 上 下 文 情境 时 ， 就 可 以 着 手 为 它们 进行 存档 和 备案 。 


8.1.2 mU UR 
要 想 验 证 你 的 框架 ， 最 好 是 研究 那些 先行 者 的 作品 。 在 一 些 传统 的 设计 教 
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育 中 ， 就 会 使 用 这 种 方法 。 作 曲 者 会 研究 其 他 音乐 家 的 作品 ， 仔 细 观 察 他 们 是 
如 何 组 织 和 排列 音符 的 。 建 筑 师 会 研究 已 有 的 建筑 ， 了 解 前 辈 是 如 何 解决 难题 


研究 先行 者 的 作品 是 一 项 悠久 而 光 深 的 传统 。 不 过 ， 由 于 Web 设计 仍然 是 
很 新 的 事物 (尤其 是 相对 于 作曲 和 建筑 来 说 )， 所 以 我 们 并 没有 建立 起 研究 这 类 
型 作品 的 程序 化 方法 。 但 是 ， 我 们 在 一 穷 品 鉴 。 


品 鉴 一 个 网 站 和 体验 它 是 两 码 事 。 当 你 使 用 一 个 电子 商务 网 站 时 ， 会 专心 
于 自己 的 目标 : 挑选 并 订购 正确 的 产品 。 在 一 个 设计 良好 的 网 站 上 ， 你 会 全 神 
贯 注 于 这 个 目标 。 你 绝 不 会 关心 网 站 的 内 部 结构 是 个 什么 样子 。 


而 当 你 品 鉴 一 个 网 站 时 ， 就 完全 是 另 一 码 事 了 。 你 可 以 仔细 研究 细节 ， 不 
管 是 每 一 个 部 件 的 微妙 之 处 ， 还 是 整个 应 用 的 总 体 流 程 。 你 的 目的 不 再 是 关注 
网 站 的 内 容 ， 而 是 聚焦 于 它 的 表现 方式 和 操作 方式 。 


1. 发 现 影响 点 


Google 有 一 条 被 称 为 “20% 自由 时 间 ”” 的 政策 。 设 计 师 可 以 自由 支配 
20% 的 工作 时 间 ， 做 自己 认为 更 重要 的 事情 ， 而 不 是 那些 指派 的 项 目 。 这 个 想 
法 有 一 半 是 为 了 娱乐 ， 另 一 半 则 是 为 了 教育 。 当 你 从 事 一 些 工作 领域 之 外 的 事 
情 时 ， 常 常 能 学 到 一 些 平时 无 法 学 到 的 东西 。 


不 妨 试想 一 下 ， 如 果 我 们 只 花 一 半 的 时 间 一 一 每 周 工作 时 间 的 10% 一 一 来 
品 鉴 其 他 网 站 ， 会 发 生 些 什么 。 一 周 有 40 个 小 时 的 工作 时 间 ， 我 们 只 用 花 4 个 
小 时 来 探究 其 他 网 站 的 设计 。 如 果 我 们 在 一 年 中 每 周 都 伦 上 4 个 小 时 ， 那 么 就 
有 超过 5 周 的 时 间 来 做 研究 。5 个 星期 ， 我 们 能 学 到 很 多 。 


那么 我 们 应 该 研究 哪些 网 站 呢 ? 


我 们 可 以 从 竞争 对 手 开 始 ， 看 看 他 们 是 如 何 解决 同样 问题 的 。 我 们 也 可 以 
看 看 那些 做 不 好 就 生存 不 下 去 的 网 站 一 一 哪怕 有 一 个 差劲 的 设计 就 会 失去 生存 
机 会 。 专 门 在 网 上 经 营 的 公司 ， 例 如 Netfix、eBay、 亚 马 逊 还 有 戴尔 ， 几 乎 绝 
大 部 分 的 收入 《如 果 不 是 所 有 的 话 ) 都 来 自 于 互联 网 。 观 察 这 些 网 站 有 助 于 我 
们 了 解 如 何 改进 设计 ， 从 而 满足 用 户 和 企业 两 方面 的 需求 。 


O “20% 自由 时 间 (20-Percent Time)” J Google 公司 的 一 项 管理 政策 。 开 发 人 员 享 有 20% 的 
自由 支配 时 间 “《〈 每 周 中 有 一 天 时 间 )， 让 他 们 去 做 自己 认为 更 重要 的 事情 ， 以 鼓励 创新 。 这 
个 政策 带 来 的 结果 就 是 诞生 了 邮件 产品 Gmail， 以 及 实践 六 度 空间 理论 的 社会 性 网 络 服务 
Orkut. 
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不 过 ， 仅 仅 观察 最 流行 的 网 站 是 不 够 的 。 你 应 该 拨 出 一 部 分 品 鉴 时 间 去 观 
察 那些 以 前 从 未 听 说 过 的 网 站 。Jared 和 他 在 UIE 的 团队 建议 客户 看 看 那些 与 
自己 公司 〈 或 组 织 ) 目的 完全 不 同 的 网 站 。 人 金融 网 站 、 交 友 网 站 、 大 学 、 书 店 ， 
还 有 在 线 工 具 ， 例 如 博客 工具 或 者 设计 师 竞 标 网 站 等 ， 都 是 可 供品 鉴 的 资源 。 
从 这 些 实例 当中 ， 我 们 可 以 了 解 到 设计 师 如 何 调整 基础 架构 以 适应 网 站 特殊 的 
需求 ， 同 时 我 们 也 能 够 捕捉 到 适应 于 我 们 所 从 事 的 领域 的 创新 思维 。 


2. 我 们 在 找 什么 


在 品 鉴 时 ， 有 一 件 事情 可 以 试 着 标识 出 来 ， 也 就 是 我 们 所 谓 的 问题 /解决 
方案 配对 。 你 可 以 把 某 个 已 经 完成 的 设计 看 做 是 一 位 设计 师 解 决 某 问题 的 尝试 
通过 观察 解决 方案 ， 你 常常 可 以 猜测 该 方案 解决 的 是 什么 问题 。( 实 际 上 ， 这 正 
是 我 们 确定 一 系列 设计 标准 的 关键 。) 


品 鉴 的 目的 在 于 收集 各 种 可 能 的 解决 方案 ， 以 应 对 尚 竺 解决 的 问题 。 如 此 
一 段 时 间 之 后 ， 当 你 遇 到 某 个 类 似 问 题 的 时 候 ， 就 可 以 参考 这 份 “目录 ” 你 也 
可 以 回访 那些 品 鉴 过 的 网 站 ， 看 看 其 设计 在 这 段 时 间 内 是 否 有 改进 。 了 解 其 他 
人 针对 同一 个 问题 不 同 的 解决 方法 ， 有 助 于 提高 你 对 自己 的 网 站 领悟 力 和 洞察 力 。 


图 书馆 就 是 一 个 绝 佳 的 例子 。 正 如 本 书 第 3 章 所 描述 的 ， 构 建 于 Polaris A 
统 之 上 的 图 书馆 网 站 和 常常 会 偏离 哪怕 是 最 常规 的 标准 (这 是 因为 Polaris 软件 
本 身 的 设计 缺陷 造成 的 )， 导 致 它们 只 提供 了 少量 或 者 压根 就 没有 提供 应 有 的 
支持 。 更 糟 的 是 ， 其 他 那些 为 Polaris 系统 开发 插件 的 软件 供应 商 不 得 不 适应 
Polaris 的 这 些 缺 点 ， 由 此 创造 出 的 设计 往往 只 会 使 问题 更 加 严重 。 如 果 这 些 图 
书馆 软件 供应 商 〈 主 要 是 Polaris) 能够 把 视线 转移 到 图 书馆 之 外 的 领域 ， 观 察 
那些 成 功 的 公司 为 了 支持 类 似 行为 而 早已 建立 的 标准 ， 将 能 够 极 大 地 获 益 。 为 
了 说 明 这 一 点 ， 不 妨 思考 一 下 基于 Polaris 的 图 书馆 网 站 几 种 有 悖 传统 的 方式 。 


口 把 所 有 的 条 目 信 息 都 插入 到 搜索 结果 页 面 ， 系 统 所 需 的 点 击 次 数 有 可 能 

会 减少 ， 但 是 用 户 无 法 将 内 容 页 加 入 书签 。 

O 由 于 没有 考虑 搜索 结果 中 应 该 显示 哪些 类 型 的 内 容 〈 我 们 在 第 4 章 曾 经 
讨论 过 )， 用 户 的 搜索 结果 往往 会 变 成 毫 无 无 向 性 的 混合 列表 ， 很 难 反 
映 他 们 的 本 来 意图 。 

口 由 于 在 网 站 导航 中 默认 使 用 了 Patron“ 这 样 的 术语 ， 用 户 在 思考 时 被 迫 

脱离 了 自己 一 贯 的 思维 模式 。 


O patron 一 词 意 为 “赞助 人 ” 但 在 此 含义 上 不 如 sponsor 一 词 常用 。 
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O 在 搜索 结果 中 MARC (machine-readable cataloging， 提 供 了 机 读 编 目 ) 
格式 的 记录 入 口 〈 其 中 包含 了 只 有 图 书 管理 员 才 能 理解 的 编码 条 目 信 
息 )， 并 且 用 一 个 很 醒目 的 书籍 图 标 来 表现 这 些 MARC 记录 。Polaris 也 
许 为 图 书 管理 员 〈 也 就 是 那些 偶尔 需要 这 类 信息 的 人 ) 解决 了 一 个 问 
题 ， 但 同时 却 把 广大 用 户 不 应 该 看 到 的 东西 放 到 了 最 显眼 的 位 置 。 


在 功能 上 ， 图 书馆 目录 和 一 个 商务 网 站 并 没什么 两 样 一 一 它们 实际 上 支持 
的 都 是 同一 种 行为 。 通 过 人 研究 Target.com、Barnesandnoble.com、 亚 马 逊 以 及 其 
他 成 功 的 在 线 零 售 网 站 ，Polaris 团队 应 该 可 以 轻松 地 解决 绝 大 多 数 〈( 如 果 不 是 
全 部 的 话 ) 出 现在 图 书馆 用 户 眼 前 的 问题 。 


口 创建 独立 的 、 用 户 可 以 加 入 书签 的 内 容 页 ， 能 够 解决 许多 有 关 可 用 性 、 
可 扩展 性 和 可 访问 性 方面 的 问题 。 

口 对 搜索 系统 进行 修改 和 调整 ， 能 够 产生 更 好 的 搜索 结 

O 使 用 用 户 更 熟悉 的 术语 ， 有 助 于 他 们 在 网 站 里 获得 导向 ， 找 到 需要 的 条 
目 、 信 息 和 功能 。 

O 创建 专门 针对 图 书 管理 员 的 增强 版 本 ， 既 兼顾 了 图 书 管理 员 的 需求 ， 同 
时 对 于 一 般 用 户 来 说 ， 那 些 难以 理解 的 无 用 内 容 也 看 不 到 了 。 


这 些 解决 方案 (以 及 其 他 更 多 ) 能 够 极 大 地 提升 图 书馆 网 站 的 流通 量 。 流 
通 量 就 是 图 书馆 的 收入 命脉 ， 它 的 大 小 直接 影响 到 图 书馆 在 下 一 财 年 所 能 获得 
的 资金 多 少 。 

3. 留意 你 自身 的 领域 

具体 到 你 的 项 目 ， 还 可 以 品 鉴 与 你 所 在 领域 相同 的 那些 网 站 。 在 这 里 你 能 
找到 令 人 惊喜 的 东西 。 

在 Robert 的 讲座 中 ， 为 高 等 教育 网 站 标识 框架 的 那个 团队 让 大 伙 儿 都 吃 了 
一 惊 ， 因 为 他 们 发 现 研 究 中 几乎 所 有 的 网 站 都 体现 出 完全 相同 的 信息 范畴 和 体 
ARTI. 

该 团队 研究 的 所 有 网 站 都 提供 了 链接 ， 分 别 指向 到 学 校本 身 〈 校 园 生活 、 
学 院 历史 等 )、 学 术 活 动 、 录 取 和 奖学金 、 毕 业 校 友 、 还 有 图 书馆 。 连 它们 在 导 
航 中 使 用 的 字眼 都 完全 相同 。 这 一 套 极为 标准 的 导航 体系 出 现在 了 每 一 个 网 站 
E, 不论 网 站 本 身 是 好 还 是 差 。 

相似 性 还 不 止 于 此 。 
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这 些 网 站 全 部 都 出 现 了 被 Jared 亲切 地 称 为 “ 树 下 女孩 ”的 现象 一 一 几乎 
每 一 个 高 等 教育 网 站 都 会 有 至 少 一 张 这 样 的 照片 :一 个 女性 (通常 会 更 多 ) Ae 
在 一 棵 树 下 。 


这 类 的 图 片 只 要 场景 合适 就 会 一 再 出 现 ， 让 我 们 不 禁 猜 测 : 树 下 的 女孩 很 
可 能 是 一 个 极 大 的 卖点 ， 尤 其 对 于 那些 希望 结识 她 们 的 男生 来 说 。 


如 果 你 在 保险 界 工作 ， 请 研究 其 他 保险 公司 的 网 站 。 为 摄影 图 库 工作 ? 请 
研究 摄影 图 库 的 网 站 。 


不 过 ， 图 书馆 界 的 人 十 也 许 最 好 还 是 看 看 其 他 领域 的 网 站 。 
8.1.3 ”把 它 写 出 来 


开发 框架 的 下 一 步 就 是 建立 文档 ， 而 在 本 书 中 我 们 已 经 展示 了 框架 文件 所 
应 有 的 结构 。 当 然 ， 即 使 是 这 个 看 似 简 单 的 步骤， 也 有 其 自身 的 复杂 性 。 


有 些 项 目 经 理 认 为 ， 孕 育 了 优秀 的 设计 以 后 ， 开 发 团队 只 需 一 份 简单 的 文 
档 就 足以 将 其 实现 了 。 但 不 幸 的 是 ， 哪 怕 是 最 简单 的 解决 方案 ， 也 需要 大 量 的 
沟通 工作 。 设 计 产 物 的 交付 是 设计 师 和 开发 人 员 之 间 的 关键 桥梁 。 不 管 是 生产 、 
交付 的 过 程 ， 还 是 相应 的 文档 ， 都 值得 我 们 认真 对 待 。 


UIE 曾 观察 过 一 些 团 队 怎 样 成 功 地 把 设计 师 的 想法 传达 给 开发 人 员 。 研 究 
发 现 ， 如 果 交 付 的 产物 不 良 ， 或 者 交付 的 过 程 不 良 ， 团 队 就 会 丢失 很 多 重要 的 
细 方 。 如 今 交 互 工具 变 得 更 加 多 元 化 ， 相 应 的 问题 也 会 更 加 复杂 。 当 客户 机 / 
服务 器 的 交互 变 得 更 精密 、 交 互 行为 (例如 鼠标 拖 放 〉 变 得 更 丰富 的 时 候 ， 一 
份 随手 写 就 的 文档 无 法 满足 项 目 本 身 的 需要 。 最 成 功 的 团队 往往 都 会 密切 关注 
那些 在 交付 产物 背后 的 关键 目标 。 


在 一 个 理想 的 世界 里 ， 设 计 师 和 开发 人 员 应 该 一 起 走 进 一 个 特殊 的 房间 ， 
戴 上 特殊 的 头套 ， 然 后 所 有 的 设计 细节 会 在 几 秒 钟 内 瞬间 传达 给 团队 的 每 个 成 
员 。 但 在 我 们 这 个 世界 里 ， 开 发 人 员 没 办 法 理解 设计 师 的 思想 ， 所 以 才 会 出 现 
问题 。 并 不 是 说 设计 师 故 意向 开发 人 员 隐 螨 了 什么 ， 而 是 当 你 深入 思考 某 个 问 
题 时 ， 很 难 知道 自己 是 否 已 经 完全 传达 出 了 头脑 中 的 所 有 细节 。 


以 下 是 在 这 种 跨越 中 经 常会 丢失 的 一 些 细节 。 


O 不 同 设计 元 素 的 优先 级 : 对 于 用 户 的 目标 来 说 ， 并 非 每 一 个 设计 元 素 都 
同等 重要 。 在 设计 的 过 程 中 ， 团 队 会 制订 出 相对 应 的 优先 级 。 但 如 果 开 
发 人 员 手 上 只 有 一 个 界面 截图 或 者 粗略 的 设计 稿 ， 那 么 就 会 失去 这 种 优 
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先 级 。 

O 微妙 的 交互 : 静态 图 片 很 难 展现 动态 的 行为 。 尤 其 难以 展现 那些 由 用 户 
触发 且 没 有 对 应 可 见 控件 的 界面 变化 ， 例 如 鼠标 悬 停 行 为 。 

a 续 密 的 设计 逻辑 : 在 设计 过 程 中 ， 有 些 部 分 会 被 团队 着 重 考虑 和 讨论 ， 
进行 多 次 交互 尝试 而 在 最 终 推敲 定 结果 。 而 一 旦 交付 到 开发 人 员 手 中 
后 ， 改 变 这 些 部 分 也 许 会 打破 原本 精心 维系 的 平衡 。 不 过 ， 男 外 一 些 部 
分 则 可 能 从 一 开始 就 没有 进行 过 调整 。 开 发 人 员 需 要 知道 在 这 些 部 分 里 
面 可 能 仍然 有 改变 的 空间 。 


有 些 技巧 可 以 帮助 我 们 创建 表达 清楚 这 些 细 节 的 交付 过 程 。 比 如 ，Keith 
Robinson? (西雅图 设计 公司 Blue Flavor ”的 前 任 负责 人 和 创意 总 监 ) 曾 提 到 ， 
公司 创建 了 一 份 设计 优先 级 文档 ， 按 照 优先 级 次 序 描述 了 每 一 个 设计 元 素 以 及 
它们 的 工作 方式 。 如 果 出 现 了 实现 上 的 问题 ， 可 以 根据 这 份 文档 进行 决策 。 


为 了 传达 设计 中 更 为 复杂 的 交互 ， 可 以 考虑 与 书面 描述 一 同 递 交 一 个 交互 
原型 。 我 们 交流 过 的 许多 团队 都 使 用 原型 设计 工具 ， 从 纸张 原型 到 Adobe Flash 
不 等 ， 以 此 向 开发 人 员 展 示 设 计 意图 。 这 些 原 型 不 需要 多 么 别致 花哨 一 一 它们 
只 需要 说 明 在 实现 时 交互 应 当 如 何 操作 即 可 。 令 人 吃惊 的 是 ， 简 略 的 纸张 原型 
非常 有 效 ， 而 且 开发 人 员 非 常 乐于 得 到 它们 。 

UIE 交流 过 的 一 个 团队 在 文档 中 运用 了 视觉 语言 来 表现 各 个 设计 功能 的 不 
同 周全 程度 。 经 过 详细 考虑 的 元 素 使 用 的 是 正常 文本 ， 段 落 没有 缩 进 ， 而 那些 
尚未 仔细 研究 的 元 素 则 使 用 了 和 斜体 字 ， 而 且 进 行 了 缩 进 。 这 一 简单 而 有 效 的 视 
觉 语 言 有 助 于 开发 人 员 了 解 到 必要 的 信息 。 

还 有 一 些 团队 则 确保 其 中 包含 了 测试 过 程 的 描述 ， 以 及 最 终 设 计 背 后 的 逻 
辑 依据 。 这 些 描 述 有 助 于 开发 团队 在 实现 过 程 中 维护 高 优先 级 元 素 的 完整 性 。 

1. 降低 开发 成 本 

在 UIE 的 研究 中 ， 很 多 团队 都 困扰 于 那些 理论 上 很 棒 但 实际 上 效果 不 佳 的 
想法 。 重 新 设计 以 及 因此 而 产生 的 重复 工作 都 会 增加 开发 成 本 ， 而 且 影响 了 部 
署 的 速度 。 寻 找 降 低 或 省 去 这 些 成 本 的 方法 对 于 公司 来 说 无 疑 是 件 好 事 。 


许多 团队 都 通过 成 本 低 、 实 现 快 的 原型 设计 工具 来 协助 降低 成 本 。 再 次 地 ， 


O Keith Robinson 是 一 位 多 才 多 艺 的 作家 、 设 计 师 、 艺 术 家 和 出 版 人 。 个 人 网 站 是 http:/ 
keithrobinson.com. 


© Blue Flavor 是 一 家 开发 Web 和 手机 应 用 的 小 型 设计 公司 。 网 站 是 http://blueflavor.com。 
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这 些 工具 不 需要 多 么 别致 花哨 一 一 只 要 能 快速 传达 设计 意图 即 可 。 


原型 的 确 很 有 帮助 ， 但 如 果 你 有 精确 的 使 用 案例 则 更 好 。 那 些 仔细 研究 过 
用 户 角色 和 使 用 场景 的 团队 很 容易 创建 使 用 案例 ， 从 而 有 助 于 验证 原型 是 否 有 
效 。 在 使 用 案例 中 运行 原型 可 以 判断 设计 在 哪些 地 方 可 以 发 挥 作用 ， 而 在 哪些 
地 方 会 出 现 错误 。 


在 更 新 现 有 设计 的 时 候 ， 有 一 两 个 与 UIE 交流 过 的 团队 使 用 了 前 后 图 片 的 
对 比 来 表现 两 个 版 本 的 差别 。 开 发 团队 在 新 设计 的 劳 边 能 看 到 原 有 的 设计 ， 再 
加 上 清晰 的 文字 来 描述 改变 ， 有 助 于 他 们 对 自己 的 工作 有 更 直观 的 理解 。 


2. 明确 错误 的 出 现 条 件 


在 记录 框架 时 ， 也 需要 考虑 备用 的 任务 流程 。 团 队 需 要 清晰 地 传达 出 可 能 
出 现 的 分 枝 流 程 ， 以 及 错误 的 出 现 条 件 。 不 过 ， 出 错 条 件 非常 难以 形象 化 ， 这 
使 得 它们 很 容易 在 传达 设计 意图 的 过 程 中 被 遗漏 。 


要 想 掌 握 用 户 使 用 设计 时 在 什么 情况 下 可 能 出 现 错误 ， 扎 实 的 研究 非常 关 
键 。 有 些 团队 与 所 在 公司 的 支持 中 心 建立 了 稳固 的 沟通 ， 把 支持 专员 们 经 常 处 
理 的 问题 全 部 收集 起 来 。 


还 有 些 团队 则 进行 “哪里 可 能 出 错 ” 的 头脑 风暴 会 议 ， 设 想 当 关 键 信息 
《例如 账户 号 码 或 者 难以 记忆 的 个 人 信息 ) 丢失 或 者 输入 错误 后 会 发 生 什么 。 


当然 ， 有 很 多 团队 通过 可 用 性 研究 来 标识 可 能 出 现 的 问题 类 型 。 不 过 ， 男 
一 些 团 队 则 使 用 了 更 为 新 疾 的 方法 ， 例 如 奖励 那些 有 功 于 此 的 成 员 。 有 一 个 团 
队 甚至 还 举办 了 “出 错 检测 ”的 竞赛 ， 团 队 成 员 相 互 兖 争 ， 看 彼此 能 在 短 时 间 
内 归纳 出 多 少 个 不 同 的 出 错 条 件 。 


还 有 一 种 新 颖 的 方式 是 通过 “价值 观 一 览 表 ”使 设计 师 和 开发 人 员 领 悟 到 
设计 中 注入 的 基本 价值 。 这 些 价 值 观 可 能 包括 “我 们 不 希望 用 户 感到 自己 很 思 
春 ” 或 者 “哪怕 只 能 多 避免 一 条 错误 信息 ， 我 们 也 会 竭尽 所 能 ”， 等 等 。 价 值 观 
有 助 于 团队 成 员 认识 到 ， 虽 然 直接 实现 最 为 轻松 方便 ， 但 有 时 一 点 额外 的 努力 
或 资源 就 能 解决 一 个 可 能 出 现 的 问题 。 


还 有 个 团队 创建 了 一 份 “ 偶 然 事件 问答 ”的 文档 ， 帮 助 他 们 说 明 导 致 那些 
不 快乐 的 使 用 体验 的 原因 。 文 档 中 提出 的 问题 包括 “如 果 用 户 没 有 输入 标题 会 
发 生 什么 ”或 者 “如 果 用 户 试图 输入 超过 60 个 字符 的 标题 会 怎样 ”文档 的 答 
案 并 不 只 是 针对 问题 ， 同 时 还 讨论 了 背后 的 基本 原理 。( 这 种 做 法 很 适合 上 文中 
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的 价值 观 一 览 表 。) 
3. 提升 创造 力 


通过 UIE 的 研究 我 们 得 知 ， 所 有 创作 出 高 效 设 计 的 团队 ， 在 交付 流程 上 都 
有 一 些 成 熟 的 技巧 。 他 们 明白 自己 并 不 是 生活 在 理想 世界 ， 因 此 会 尽力 确保 将 
设计 和 背后 的 逻辑 传达 给 团队 的 每 一 个 成 员 。 他 们 为 此 消耗 了 一 定 的 资源 ， 但 
得 到 的 回报 则 是 更 短 的 开发 周期 和 更 高 的 实现 品质 。 

当然 ， 在 框架 文档 中 最 需要 创新 思维 的 是 设计 标准 部 分 。 你 需要 道 向 思考 
那些 标准 解决 方案 背后 的 动机 ， 这 样 才能 归纳 设计 标准 ， 鼓 励 人 们 创新 。 当 进 
行 这 部 分 工作 的 时 候 ， 可 以 考虑 Scott Berkun ^ (The Myths of Innovation “一 书 
的 作者 ) 提出 的 以 下 见解 。 


对 于 想 创新 的 人 来 说 ， 下 面 的 问题 会 有 所 帮助 ; 


口 为 什么 要 用 这 种 方法 ? 
口 是 谁 开 始 这 件 事 的 ? 为 什么 要 开始 这 件 事 ? 

口 他 们 考虑 了 什么 备 选 方案 ?在 新 想法 之 前 的 想法 是 什么 ? 

口 有 关 如 何 做 这 件 事情 ， 我 (或 者 我 的 朋友 ) 最 大 的 抱怨 是 什么 ? 怎样 改 
变 才能 让 它 更 好 ? 

口 在 其 他 城市 、 国 家 、 文 化 或 者 时 代 中 ， 会 怎样 做 这 件 事情 ? 

口 他 们 是 否 有 什么 不 同 的 假设 ? 是 否 有 什么 约束 ? 

口 怎样 才能 将 上 述 问题 的 答案 应 用 到 我 要 做 的 事情 上 ? 


许多 伟大 的 创新 者 都 能 提出 比 其 他 人 更 好 的 问题 ， 而 这 正 是 他 们 能 成 功 的 
部 分 原因 。 这 无 关 天 赋 〈 不 管 这 个 词 指 的 是 什么 )， 他 们 也 没有 每 天 早晨 
做 什么 特别 的 秘密 脑 锻 炼 ， 甚 至 和 他 们 的 财富 多 少 也 毫 无 关系 。 他 们 只 是 
找到 那些 已 经 存在 ， 但 可 能 会 有 用 的 想法 ， 提 出 简单 的 问题 然后 执著 追求 
答案 。 


O Scott Berkun 在 微软 公司 工作 了 10 年 ， 参 与 的 项 目 包 括 IE. MSN 和 Microsoft Windows. 
2003 年 离开 微软 后 专职 从 事 写作 、 教 书 和 培训 演讲 。 他 也 是 2005 年 出 版 的 畅销 书 The Art 
of Project Management (《 项 目 管理 之 美 》) 的 作者 。 个 人 网 站 见 http://www.scottberkun.como 

© The Myths of Innovation (《 创 新 的 神话 》) 一 书 于 2007 年 由 O’ Reilly 出 版 社 出 版 。 书 中 详细 
探究 了 创新 的 历史 (包括 软件 和 互联 网 时 代 )， 揭 示 了 如 何 将 想法 转变 为 成 功 的 创举 ， 并 揭 
露 了 10 种 对 创新 的 常见 误解 。 
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提出 这 些 问题 不 仅 有 助 于 我 们 理解 有 些 东西 在 一 开始 是 如 何 变 成 标准 的 ， 
同时 还 能 激发 新 思路 。 它 会 带 给 我 们 那些 有 别 于 竞争 对 手 的 解决 方案 ， 还 会 从 
你 的 用 户 那里 带 来 更 多 的 感激 。 


81.4 SET FS 


无 数 的 设计 团队 已 经 意识 到 ， 一 个 健全 的 设计 模式 资源 库 会 大 大 简化 用 户 
界面 的 开发 过 程 ， 而 围绕 其 建立 的 框架 体系 资源 库 则 会 带 来 更 大 的 帮助 。 一 个 
高 质量 的 资源 库 意 味 着 团队 成 员 在 需要 信息 时 能 够 信 手 牛 来 。 选 择 那 些 可 用 的 、 
而 且 能 很 好 地 为 用 户 服务 的 元 素 ， 这 对 于 开发 者 来 说 无 疑 是 阻力 最 小 的 前 进 方 
向 。 


UIE 的 研究 指出 ， 构 建设 计 模 式 资源 库 的 难点 之 一 在 于 最 初 的 编目 工作 。 
自然 ， 这 需要 资源 库 的 创建 者 来 推动 ， 而 完成 这 部 分 工作 以 后 ， 其 价值 立刻 就 
能 体现 出 来 。 团 队 可 以 开始 讨论 现 有 设计 的 各 种 可 行 与 不 可 行 之 处 ， 并 勾画 出 
未 来 发 展 的 远景 。 


与 模板 和 设计 指南 一 样 ， 构 建 模式 和 框架 资源 库 也 需要 大 量 的 精力 。 但 这 
两 者 的 区 别 在 于 ， 团 队 成 员 和 构建 资源 库 时 各 参与 者 可 以 对 工作 进行 分 配 。 


模式 和 框架 体系 文档 更 接 似 于 那 种 标准 的 工程 设计 规范 文档 ， 而 不 是 呆板 
的 规则 手册 。 这 使 得 它们 在 制订 过 程 中 更 容易 得 到 援手 。 一 个 开发 过 上 百 个 网 
页 的 公司 (或 组 织 ) 只 需要 把 曾经 实现 的 设计 记录 下 来 ， 就 算 完 成 了 最 初 的 收 
集 工 作 。 在 此 之 后 ， 你 可 以 随时 对 模式 和 框架 进行 更 新 ， 以 反映 新 的 设计 思路 ， 
并 且 在 修改 后 通知 所 有 参与 者 。 


在 下 一 章 中 ， 我 们 会 让 你 坐 上 驾驶 座 ， 逐 步 深入 一 个 虚构 的 项 目 。 这 有 助 
于 你 了 解 如 何 将 框架 体系 整合 到 设计 流程 中 ， 何 时 开始 思考 ， 以 及 如 何 让 它们 
更 有 实际 意义 。 我 们 还 会 通过 实例 告诉 你 怎样 利用 设计 标准 制订 出 标准 之 外 的 
解决 方案 。 


E ES 


我 们 一 样 ， 可 能 你 也 经 历 过 无 数 项 目 ， 它 们 都 存在 着 本 书 开 头 所 列举 的 那 
些 问 题 : 含糊 不 清 的 需求 、 有 限 的 时 间 、 资 源 和 预算 ， 以 及 紧迫 得 透 不 过 
气 的 最 后 期 限 。 在 这 一 章 里 ， 你 还 得 把 这 些 再 经 历 一 遍 。 不 过 ， 这 次 我 们 将 翻 


过 这 座 大 山 。 
现在 ， 我 们 将 带 你 走 进 一 个 虚构 的 项 目 ， 而 你 正 是 该 项 目的 交互 设计 师 。 


通过 在 典型 项 目 中 应 用 框架 ， 我 们 将 向 你 展示 如 何在 类 似 情况 下 运用 框架 ， 并 
从 中 获 益 。 研 究 这 个 虚构 的 案例 将 向 我 们 揭示 : 在 何人 处 引入 框架 ， 如 何 选择 框 
架 ， 应 如 何 规范 所 包含 的 模式 ， 如 何 根据 上 下 文 来 决定 设计 ， 以 及 怎样 在 项 目 
的 创新 方面 利用 框架 。 

设计 是 一 种 从 无 到 有 、 不 可 或 缺 的 思维 过 程 ， 而 不 是 把 想法 先 倒 出 来 ， 然 
后 逐个 核对 、 筛 选 的 结果 。 因 此 ， 在 本 章 中 我 们 还 会 就 很 多 方面 提出 自己 的 见 
笃 ， 包 括 上 下 文 情境 的 含义 和 重要 性 、 重 要 的 可 用 性 问题 ， 以 及 设计 各 种 网 站 
或 应 用 程序 时 要 考虑 的 因素 ， 等 等 ， 因 为 只 有 理解 了 这 些 方面 ， 我 们 才能 高 效 
地 利用 框架 体系 一 一 从 而 创造 出 有 效 的 Web 解决 方案 。 


9.1 组 织 计 划 


一 位 客户 打 电 话 来 请 你 为 他 们 设计 一 个 旅游 指南 网 站 。 简 单 来 说 就 是 ， 用 
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户 在 网 站 上 会 指定 有 关 行 程 的 一 些 喜好 ， 然 后 得 到 一 份 旅行 指南 ， 包 括 推 荐 的 
旅馆 、 和 餐厅 、 娱 乐 场所 ， 甚 至 还 会 介绍 途中 能 在 哪里 锻炼 身体 。 客 户 对 网 站 的 
目标 很 明确 ， 但 是 并 不 知道 应 该 如 何 实现 。 此 外 ， 项 目的 预算 低 、 期 限 紧 。 这 
位 客户 不 想 浪 费 一 丁点 儿 时 间 。 


通过 随后 的 几 次 交流 ， 你 发 现 有 几 个 重要 的 地 方 需要 注意 ， 而 它们 看 起 来 
和 你 过 去 曾经 做 过 的 好 多 项 目 都 很 相似 。 


口 项 目 中 只 有 大 约 20% 的 设计 工作 属于 激动 人 心 的 部 分 。 其 他 的 80% 都 
是 由 基本 元 素 构成 (我 们 随后 将 讨论 这 一 点 )。 

O 你 以 前 曾经 和 这 个 项 目的 前 端 开发 人 员 合 作 过 ， 因 此 你 很 清楚 他 的 能 
力 ， 而 且 知 道 应 该 给 他 什么 ， 以 便 能 按时 完成 任务 。 

口 项 目 中 最 迷人 的 部 分 一 一 创新 的 部 分 一 一 是 客户 唯一 真正 关心 的 地 方 。 
任何 有 关 网 站 其 他 方面 的 谈话 都 会 很 快 使 他 失去 兴趣 和 关注 ， 而 你 必须 
获得 他 的 兴趣 和 关注 ， 才 有 把 握 完 成 项 目 。 

O 整个 团队 包括 一 个 交互 设计 师 (你 )、 一 个 前 端 开 发 、 一 个 后 台 开 发 、 
一 个 视觉 设计 师 以 及 一 个 希望 早日 完工 但 又 资金 不 足 的 客户 。 这 就 是 你 
的 团队 。 

口 要 想 完 成 任务 ， 你 只 有 极其 有 限 的 时 间 。 


你 的 工作 是 规划 出 项 目的 范围 ， 制 订 出 信息 架构 ， 建 立 核 心 的 交互 任务 流 
Fe (形成 一 份 旅行 指南 )， 设 计 出 网 站 导航 ， 并 为 整个 站 点 创建 线 框图 。 

而 你 只 有 几 天 时 间 来 搞定 这 些 事情 。 

第 一 步 你 会 怎么 做 ? 

你 会 删 减 所 列 的 待 办 事项 。 你 决定 不 再 按 单独 的 可 交付 产物 来 划分 架构 ， 
而 是 直接 创建 整个 网 站 的 设计 框图 ， 试 图 从 内 而 外 让 其 成 形 。 而 且 你 决定 不 再 
为 每 一 个 页 面 都 创建 框图 ， 而 把 重点 放 在 核心 交互 上 。 至 于 其 他 细节 ， 可 以 制 
订 一 套 指导 方针 ， 留 给 团队 成 员 来 处 理 。 
9.2 搭建 框架 


也 许 你 已 经 再 清楚 不 过 ， 确 定 一 个 项 目的 需求 往往 并 不 只 是 问 问 客户 那么 
简单 。 你 的 客户 有 明确 的 目标 ， 但 除 此 之 外 她 没有 更 多 的 想法 。 你 要 靠 自 己 来 
判断 需要 哪些 元 素 、 它 们 各 自 的 位 置 、 工 作 方式 以 及 背后 的 理由 。 不 过 幸运 的 
是 ， 你 正好 可 以 借 此 机 会 试 着 利用 框架 来 启动 一 个 设计 项 目 。 


9.2 ”搭建 框架 


拿 商务 网 站 举 个 例子 ， 尽 管 在 你 真正 投入 到 开发 中 (而 且 有 更 好 的 客户 和 
用 户 反 馈 ) 之 前 ， 似 乎 很 难 确定 产品 的 重点 和 功能 ， 但 其 实 几 乎 每 一 个 商务 系 
统 都 由 一 些 已 知 的 子 系统 构成 。 


口 目录 结构 

口 搜索 系统 

口 购物 车 

口 支付 流程 

口 订单 管理 框架 

口 关于 我 们 

就 算 不 知道 这 个 商务 网 站 会 卖 哪些 产品 ， 你 也 完全 可 以 动手 设计 它 的 架构 ， 
以 及 大 概 的 通用 页 面 布 局 。 在 此 之 后 ， 随 着 需求 的 逐步 明确 ， 你 可 以 对 最 初 的 
粗略 设计 进行 调整 ， 直 到 完全 满足 项 目的 需要 。 没 有 必要 等 所 有 问题 都 有 了 答 
案 才 开始 动手 。 你 了 解 了 要 创建 的 网 站 类 型 以 后 ， 就 可 以 进行 粗略 的 布局 等 工 
作 ， 至 于 站 点 的 最 终 目的 是 什么 其 实 无 关 紧要 。 


有 人 认为 ， 既 然 框 架 对 于 项 目 启动 这 么 有 效 ， 如 果 设 计 真 有 这 么 简单 ， 那 
么 互联 网 就 不 会 再 有 什么 可 用 性 问题 了 。 显 然 ， 这 与 事实 不 符 。 我 们 开始 选择 
框架 和 设计 模板 以 后 ， 关 注 到 细节 问题 ， 真 正 艰难 的 选择 才 开始 。 因 为 在 这 个 
时 候 ， 上 下 文 情境 成 为 了 项 目 中 最 为 关键 的 考虑 因素 。 


9.2.1 在 上 下 文中 考虑 上 下 文 
要 想 理 解 上 下 文 情境 ， 首 先 得 理解 使 界面 得 以 运作 的 以 下 3 个 基本 元 素 。 


O HP: 如 果 你 用 一 个 用 户 奉 代 了 另 一 个 用 户 ， 你 会 得 到 不 同 的 结果 。 
O 界面 : 如 果 你 替换 成 另 一 个 界面 ， 也 会 得 到 不 一 样 的 结果 。 
O ERX: 这 一 特性 不 受 特定 用 户 或 工具 的 影响 。 

如 果 设 计 中 出 现 了 可 用 性 问题 ， 通 常 是 因为 团队 成 员 没 有 掌握 用 户 可 能 的 
上 下 文 情境 (而 这 本 应 是 他 们 的 分 内 之 事 )。 对 这 方面 意识 很 强 的 团队 更 容易 做 
出 让 用 户 自始至终 都 感到 高 兴 的 设计 。 

试想 当 同 一 个 用 户 和 同一 个 界面 处 于 两 种 不 同 的 上 下 文 情境 中 时 ， 会 发 生 
些 什么 。 在 这 里 ， 虚 构 的 用 户 Janice 需要 用 某 个 类 似 PowerPoint 的 工具 来 制作 
一 篇 演讲 稿 。 

在 第 一 种 上 下 文 情 境 中 ，Janice 正在 创建 一 份 复杂 的 业务 图 表 ， 用 于 为 董 
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事 会 所 做 的 一 次 报告 。 这 次 报告 将 在 6 周 之 后 进行 。 她 之 前 从 没 用 过 这 个 工具 。 


为 了 成 功 进行 报告 ， 她 需要 确保 图 表 能 够 有 效 地 传达 出 其 中 的 内 容 ， 因 此 
她 会 花 些 时 间 研 究 这 个 工具 的 图 形 编 辑 选项 ， 以 得 到 正确 的 布局 和 格式 。 同 时 
因为 距 报 告 还 有 6 周 时 间 ， 她 会 密切 关注 各 个 细节 ， 例 如 字体 、 颜 色 和 间距 ， 
尽 可 能 获得 最 好 的 印象 。 


在 第 二 种 上 下 文 情境 中 ，Janice 正在 创建 一 份 复杂 的 业务 图 表 ， 用 于 为 董 
事 会 所 做 的 一 次 报告 。 但 这 次 报告 将 在 45 分 钟 之 后 进行 。 她 之 前 从 没 用 过 这 个 
工具 。 为 了 成 功 ，Janice 仍然 需要 确保 图 表 能 够 尽 可 能 有 效 地 传达 出 信息 ， 但 
由 于 时 间 极 为 有 限 ， 她 打算 依赖 于 已 有 的 模板 。 她 需要 一 个 能 立刻 上 手 的 模板 ， 
这 样 才能 把 剩余 的 大 部 分 时 间 放 在 核实 数据 的 准确 性 上 面 。 至 于 布局 什么 的 ， 
没 时 间 多 考虑 了 。 


在 这 两 种 上 下 文 情 境 中 ，Janice 还 是 那个 Janice， 所 用 的 工具 也 没有 任何 变 
化 。 不 一 样 的 上 下 文 情境 导致 Janice 得 到 了 不 一 样 的 结果 。 


1. 购买 抵押 贷款 


UIE 有 个 客户 是 一 家 地 方 性 银行 ， 他 们 正在 开发 一 款 基 于 网 络 的 应 用 程序 
以 便 给 有 房 人 士 提供 抵押 贷款 的 报价 。 该 银行 目前 准备 拜访 一 位 潜在 贷款 客户 ， 
Margaret. HBA, AX Margaret 使 用 这 个 应 用 程序 时 的 上 下 文 情境 ， 设 计 团队 
应 该 知道 一 些 什 么 呢 ? 


O 过 程 阶段 :Margaret 现在 正 处 于 申请 贷款 的 哪个 阶段 ? 是 刚刚 开始 还 是 
已 经 申请 了 一 些 ? 在 此 之 前 她 是 不 是 银行 的 客户 ? 她 对 我 们 的 银行 有 哪 
些 了 解 ? 为 了 做 出 决定 ， 她 还 需要 知道 些 什么 信息 ? 

Ch 理解 力 水 平 : 这 是 她 第 一 次 购置 房产 吗 ? 她 是 否 理解 贷款 是 怎么 回 事 ? 

她 是 否 清楚 各 种 选项 之 间 的 差别 ? 

O 购买 决策 阶段 : 她 选 好 想 买 的 房产 了 吗 ? 如 果 没 有 ， 她 是 否 知道 自己 能 

承担 的 价格 范围 ? 

O 动机 : 她 为 什么 想得到 贷款 的 报价 ”是 因为 她 想 知道 自己 是 否 负 担 得 
起 ， 还 是 想 和 其 他 贷款 机 构 的 利率 作 比 较 ? 

O 下 一 步 : 在 得 到 报价 之 后 ， 她 会 干什么 ? 是 马上 申请 贷款 ， 还 是 需要 和 
其 他 人 先 谈 谈 ? 她 会 和 哪些 人 谈 ? 老公 ? 父母 ? 房产 经 纪 人 ? 她 希望 和 
这 些 人 分 享 哪些 信息 ? 

O 前 期 知识 : 她 经 常 使 用 哪些 在 线 应 用 程序 ? 她 是 否 熟 悉 电 子 表格 、 电 子 
邮件 或 者 文字 处 理 软件 ? 


口 
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对 技术 的 理解 能 力 : Margaret 用 过 电子 银行 四? 她 在 网 上 缴 过 费 吗 ? 


开发 团队 归纳 的 问题 远 远 不 止 上 述 的 这 些 ， 但 你 应 该 能 理解 大 概 的 意思 。 
每 一 个 问题 都 是 在 考察 Margaret 的 上 下 文 情境 。 每 一 个 答案 都 会 对 开发 团队 的 
设计 产生 影响 。 


以 下 是 组 织 这 些 元 素 的 方法 ， 以 便 我 们 能 更 容易 地 考虑 。 


口 
口 


口 


口 


目标 : 用 户 想 达到 什么 目的 ? 怎样 才能 让 用 户 的 行为 适应 公司 的 目标 ? 
流程 : 用 户 需要 遵循 哪些 步骤 ? 各 步骤 间 的 信息 如 何 流动 ? 会 涉及 哪些 
不 同 的 角色 《〈 例 如 创建 者 、 参 与 者 、 编 辑 者 或 者 批准 者 ) ? 

输入 和 输出 : 用 户 需要 哪些 材料 和 信息 才能 顺利 使 用 界面 ? 界面 又 需要 
提供 什么 才能 让 他 们 继续 下 去 ? 

经 验 : 用 户 过 去 曾 做 过 哪些 类 似 的 事情 ? 在 得 到 这 个 设计 之 前 ， 我 们 公 
司 是 如 何 生存 下 来 的 ? 

限制 因素 : 用 户 在 工作 时 是 否 会 有 体力 上 、 时 间 上 或 财政 上 的 限制 ? 
物理 环境 : 用 户 工作 时 的 空间 有 多 大 ? 他 们 办 公 桌 上 都 有 些 什么 ”他们 
怎样 获得 必要 的 信息 《例如 用 户 手 册 ) ? 他 们 的 电脑 显示 器 上 贴 着 什么 
东西 ? 

使 用 工具 : 用 户 目 前 使 用 哪些 硬件 和 软件 ? 

联系 : 这 个 工具 的 主要 使 用 者 和 受 其 影响 的 其 他 人 之 间 有 什么 相互 联 
系 ? 


通过 把 上 下 文 情境 分 解 成 这 些 部 分 ， 我 们 可 以 对 之 前 的 问题 进行 良好 的 组 
织 ， 并 确保 涵盖 所 有 重要 的 方面 。( 尽 管 如 此 ， 分 解 不 同 的 项 目 时 仍然 会 有 细微 
的 区 别 。) 
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. 玩 猜谜 游戏 


TE Jared 和 UIE 的 团队 出 门 做 实地 研究 之 前 ， 他 们 喜欢 先 玩 个 游戏 一 一 把 
上 述 的 分 类 转化 成 一 系列 问题 ， 就 像 有 关 要 买房 的 Margaret 的 那些 问题 一 样 。 
比如 ， 给 入 就 变 成 了 “用 户 在 申请 贷款 时 需要 哪些 个 人 信息 ”和 “ 当 用 户 开始 
申请 流程 时 ， 是 不 是 已 经 掌握 了 所 有 的 信息 ”。 


然后 ， 在 第 一 次 实地 访问 之 前 ， 他 们 会 根据 对 受 访 者 已 有 的 了 解 来 猜测 这 
些 问 题 的 答案 。 即 使 只 是 猜测 ， 他 们 也 会 老 老实 实地 思考 每 一 个 答案 ， 时 不 时 
还 会 在 内 部 小 小 讨论 一 下 。 这 个 过 程 会 在 他 们 头脑 中 描绘 出 用 户 大 概 是 个 怎样 
的 人 ， 以 及 可 能 的 上 下 文 情境 会 是 怎样 。 
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当 他 们 到 实地 访问 用 户 时 ， 用 户 的 真实 环境 与 他 们 头脑 中 的 描绘 之 间 的 任 
何不 同 都 会 引起 他 们 的 注意 。 这 样 一 来 ，UIE 在 访问 中 收集 数据 变 得 非常 容易 。 


为 什么 不 能 跳 过 访问 ， 而 只 通过 头脑 风暴 归纳 出 所 有 可 能 的 上 下 文 元 素 ， 
然后 确保 设计 满足 每 一 种 需求 呢 ? 首先 ， 除 非 有 极 好 的 运气 ， 和 否则 你 的 团队 不 
可 能 有 足够 的 资源 构建 出 一 个 万 能 的 设计 ， 以 适应 每 一 种 可 能 的 上 下 文 因 素 的 
组 合 。 其 次 ， 每 一 次 实地 研究 都 会 发 现 团队 从 未 预料 到 的 事情 ， 因 为 真实 上 下 
文 情 境 背 后 的 因素 与 团队 自身 的 经 验 是 不 一 样 的 。 


通过 观察 你 的 潜在 用 户 如 何在 自己 的 环境 中 进行 互动 ， 你 会 发 现 那些 最 常 
见 的 上 下 文 元 素 ， 以 及 对 设计 的 可 用 性 影响 最 大 的 上 下 文 元 素 。 此 外 ， 你 还 可 
能 会 发 现 一 些 从 未 料 到 的 情况 。 


设计 就 发 生 在 用 户 、 界 面 和 使 用 的 上 下 文 情 境 这 3 者 的 交集 处 。 对 于 界面 
设计 师 来 说 ， 关 键 是 要 理解 各 种 可 能 的 上 下 文 情境 ， 以 确保 设计 能 够 一 直 保 持 
较 高 的 可 用 性 ， 无 论 用 户 身 边 发 生 了 什么 。 


只 有 通过 这 种 对 用 户 上 下 文 的 理解 ， 我 们 才能 理智 地 选择 框架 ， 以 及 在 实 
现 过 程 中 应 包含 的 设计 模式 。 


在 我 们 这 个 虚构 的 旅游 网 站 案例 中 ， 用 户 可 能 存在 着 多 种 上 下 文 情 境 。 他 
们 也 许 是 在 办 公 室 筹备 一 次 出 差 ， 也许 是 在 家 里 考虑 带 护 子 出 去 度假 ， 也 许 是 
在 酒吧 和 朋友 们 酒 醉 之 后 计划 一 个 远离 侍 器 的 周末 狂欢 ， 或 者 其 他 各 种 情形 。 
不 过 ， 用 户 在 这 里 不 需要 得 到 什么 批准 ， 因 为 最 后 得 到 的 旅行 指南 只 会 提供 建 
不 能 提供 任何 房间 预定 或 服务 。 在 这 种 情况 下 ， 人 们 使 用 网 站 更 可 能 只 
是 为 了 在 出 发 前 顺便 得 到 一 些 建议 而 已 。 因 此 从 本 质 上 来 说 ， 这 是 一 个 单一 任 
务 的 网 站 。 而 在 单一 任务 的 网 站 上 ， 主 要 任务 流程 的 起 始点 最 好 放 在 页 面 中 最 
为 显著 的 位 置 。 我 们 的 目标 是 不 在 主流 程 提供 辅助 性 的 功能 和 信息 ， 但 仍 提供 
对 它们 进行 访问 的 途径 ， 同 时 让 用 户 能 随时 进入 流程 ， 完 成 主要 的 任务 。 


啊 哈 一 一 信息 架构 已 经 初 见 端倪 。 


除 此 之 外 ， 用 户 应 该 能 了 解 是 谁 在 经 营 网 站 ， 从 而 判断 这 些 建议 是 否 可 信 ， 
或 者 值得 关注 。 也 就 是 关于 我 们 框架 。 用 户 应 该 能 在 网 站 中 设置 自己 的 偏好 ， 
以 便 控制 最 后 的 旅行 指南 中 出 现 的 建议 。 如 果 那 些 经 常 去 固定 地 点 出 差 的 用 户 ， 
重复 访问 网 站 时 ， 每 次 都 被 迫 提供 相同 的 答案 ， 这 会 令 他 们 很 恼火 ， 所 以 ， 网 
站 应 允许 用 户 指定 默认 设置 ， 也 就 是 账户 管理 框架 。 用 户 还 应 该 能 找到 某 个 特 
定 的 旅馆 、 景 点 、 健 身 房 的 信息 ， 也 就 是 搜索 框架 。 此 外 (当然 了 ) 首先 需要 


9.2 ”搭建 框架 mu 171 


说 服 他 们 使 用 我 们 的 网 站 ， 也 就 是 注册 框架 。 


哪怕 对 网 站 的 核心 任务 流程 还 一 无 所 知 ， 你 就 已 经 掌握 了 4 个 框架 体系 。 
有 了 它们 ， 你 就 可 以 和 客户 讨论 细节 部 分 ， 比 如 用 户 定制 的 动态 指南 ， 等 等 。 


就 和 写 文章 一 样 ， 选 择 框架 就 是 把 项 目 分 解 成 几 个 部 分 ， 然 后 为 这 些 部 分 
填充 细节 ， 使 其 富有 生命 力 。 在 这 个 部 分 ， 我们 用 A。 男 一 个 部 分 ，B。 而 那 
里 是 C。 然 后 你 再 把 它们 拼合 到 一 起 ， 写 上 承前启后 的 连接 段 ， 做 些 调 优 工作 ， 
一 切 就 完事 大 吉 了 。 即 时 的 网 站 。 


当然 ， 要 想 承 前 启 后 得 更 加 漂亮 ， 你 还 需要 确定 网 站 每 一 个 元 素 的 展现 形 
式 。 这 就 是 设计 模式 和 设计 标准 开始 发 挥 作用 的 时 候 了 。 


9.2.2 ”选用 模式 


人 们 在 计划 旅行 时 总 是 有 很 多 事情 要 人 做， 我们 不 想 浪费 用 户 的 时 间 ， 因 此 
必须 创造 出 一 个 流线型 的 任务 流程 ， 让 用 户 从 头 至 尾 不 走 任何 弯路 。 为 了 支持 
这 一 理念 ， 我 们 可 以 针对 已 有 的 框架 开始 设计 了 。 几 天 之 内 就 能 得 到 一 个 单一 
任务 的 网 站 ， 包 括 以 下 部 分 : 

口 关于 我 们 ; 

口 账户 管理 ; 

a 搜索 ; 

口 注册 。 

由 于 这 是 一 个 单一 任务 的 网 站 ， 对 用 户 也 不 存在 风险 (他 们 不 会 在 这 里 买 
任何 东西 ， 对 提供 的 建议 也 完全 可 以 不 加 理 紧 )， 所 以 “关于 我 们 ”部 分 不 用 太 
大 ， 只 需 一 些 推荐 者 的 信息 和 媒体 的 评价 足 侨 。 这 些 顶 多 也 只 是 辅助 性 的 信息 ， 
所 以 “关于 我 们 ”的 人 口 可 以 放 在 导航 的 角落 里 。 可 以 访问 ， 但 不 得 眼 。 搞 定 。 


账户 管理 不 必 很 复杂 ， 只 需 给 用 户 一 个 简单 的 表单 用 以 指定 参数 即 可 。 当 
然 ， 账户 管理 还 包括 其 他 一 些 必要 元 素 一 一 登录 链接 、 登 录 表单 、 遗 失 密 码 选 
项 、 退 出 链接 、 修 改 密码 和 更 新 用 户 E-mail 地 址 的 表单 ， 也 许 再 加 上 一 个 重 置 
密码 页 面 ， 这 取决 于 你 如 何 处 理 遗 失 密码 的 流程 。 这 些 都 是 标准 元 素 ; 你 已 经 
多 次 设计 过 它们 ， 也 有 很 多 设计 方法 。 这 一 块 也 考虑 的 差不多 了 。 

搜索 框架 则 有 点 环 手 ， 因 为 只 要 涉及 搜索 ， 一 般 都 会 让 人 头疼 。 对 于 这 个 


网 站 来 说 ， 绝 大 部 分 内 容 都 是 唯一 标识 内 容 一 一 比如 旅馆 、 和 餐厅 、 酒 吧 ， 等 等 ， 
这 并 不 难 。 但 另 一 方面 ， 这 是 个 单一 任务 的 网 站 ， 你 希望 用 户 能 一 次 性 完成 核 
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心 的 任务 流程 ， 并 且 只 在 横向 上 进行 搜索 。 也 就 是 说 ， 人 们 可 以 在 创建 旅行 指 
南 的 过 程 中 使 用 搜索 功能 ， 但 整个 任务 不 能 因此 而 中 断 ， 用 户 应 该 可 以 随时 回 
到 指南 上 来 。 此 外 ， 你 还 希望 用 户 能 够 把 想 要 的 搜索 结果 添加 到 指南 中 去 ， 以 
此 让 指南 更 加 个 性 化 ， 为 用 户 提供 更 多 的 价值 。 因 此 ， 你 决定 搜索 框 只 出 现在 
与 创建 指南 相关 的 页 面 上 (这 就 排除 了 类 似 “ 关 于 我 们 ”这 样 的 页 面 )， 而 且 在 结 
果 页 中 应 该 有 一 个 选项 ， 方 便 用 户 把 想 要 的 信息 添加 到 自己 的 旅行 指南 中 去 。 


还 有 一 个 关于 上 下 文 情境 的 思考 。 用 户 得 到 了 这 样 的 一 份 满 是 推荐 的 旅行 
首 南 之 后 ， 旅 途 期 间 他 们 将 怎样 留存 这 些 资 料 ? 也 许 旅馆 可 以 事先 预定 ， 但 是 
健身 房 、 酒 吧 和 餐厅 呢 ? 行程 中 可 能 会 遇 到 的 各 种 节日 活动 呢 ? 难道 你 会 指 志 
他 们 把 这 些 全 部 记 在 脑子 里 吗 ? 你 会 指望 他 们 把 这 些 信 息 都 记录 下 来 ， 并 在 离 
开 旅 馆 之 前 排 好 当天 的 行程 吗 ?” 如 果 是 这 样 ， 那 么 下 一 个 场景 就 是 这 位 网 回 吞 
刺 的 游客 簿 得 在 陌生 的 城市 街头 ， 努 力 地 回忆 网 站 推荐 过 的 那 家 酒吧 的 名 字 和 
地 址 ， 却 怎么 也 想 不 起 来 。 


除了 流线型 任务 流程 ， 你 提供 的 指南 还 需要 能 够 便于 人 们 随手 取 用 。 你 猜 
测 ， 用 户 可 能 会 希望 可 以 把 指南 E-mail 给 自己 或 其 他 人 ， 而 且 他 们 会 希望 可 以 
将 指南 打印 出 来 ， 这 样 就 能 在 行程 中 把 它 放 在 口袋 或 钱包 里 随身 携带 ， 以 供 随 
时 随地 参考 。 


这 一 招 说 不 上 有 多 么 创新 ， 但 令 你 惊喜 的 是 ， 你 所 知 的 其 他 旅行 指南 网 站 
都 没有 做 过 类 似 的 尝试 。 就 在 一 念 之 间 ， 只 是 因为 理解 了 用 户 的 上 下 文 情境 ， 
你 就 拉 开 了 与 其 他 网 站 的 距离 ， 提 升 了 自己 的 竞争 力 《〈 当 然 也 很 容易 被 效仿 )。 


相当 聪明 。 


9.2.3 ”应 用 设计 标准 
现在 还 有 一 个 部 分 你 没有 考虑 : 注册 框架 。 


要 想 让 用 户 认识 到 本 应 用 的 价值 其 实 很 简单 ， 只 需 把 它 放 到 首页 上 即 可 
(在 我 们 这 个 案例 中 ， 首 页 也 是 用 户 进行 每 一 次 交互 的 起 点 )。 但 由 于 这 个 网 站 
的 用 户 大 多 数 都 来 去 匆匆 ， 所 以 为 他 们 建立 保留 个 人 爱好 的 账户 也 需要 用 一 种 
完全 无 摩擦 的 方法 。 一 个 很 长 的 注册 表单 无 疑 会 抹杀 访问 者 们 再 次 光临 的 可 能 
性 。 换 句 话 说 ， 在 本 例 中 不 能 使 用 传统 的 注册 表单 ， 而 需要 开拓 一 条 新 路 来 处 
理 注册 流程 。 查 阅 注册 框架 的 设计 标准 列表 ， 其 中 一 条 引起 了 你 的 思索 : 让 用 
户 和 他 们 的 行为 相 联系 。 


9.3 EEE 


理想 的 情况 是 ， 用 户 无 须 做 任何 超出 他 们 来 访 目的 的 事情 。 他 们 需要 做 的 
只 是 按 步 又 完成 核心 的 任务 流程 ， 得 到 一 份 旅行 指南 ， 然 后 离开 。 但 是 当 他 们 
未 来 某 天 回 到 这 个 网 站 时 ， 你 希望 能 通过 某 种 方式 记录 他 们 的 喜好 ， 从 而 让 整 
个 流程 更 加 简单 。 


要 想 做 到 这 一 点 ， 你 决定 在 用 户 第 一 次 使 用 时 就 存储 他 们 输入 的 个 人 信息 ， 
以 便 下 一 次 使 用 默认 值 。 同 时 你 还 决定 ， 在 完成 任务 的 过 程 中 询问 用 户 是 否 愿 
意 存储 这 些 个 人 信息 ， 作 为 日 后 再 次 访问 的 默认 设置 。 这 一 解决 方案 打破 了 常 
规 的 注册 方法 ， 但 因为 有 用 户 再 次 光顾 ， 进 而 增加 了 网 站 的 价值 。 而 且 它 为 用 
户 移 除 了 注册 表单 的 麻烦 ， 实 际 上 改进 了 网 站 的 可 用 性 。 

你 和 客户 进行 了 一 次 简短 的 交流 ， 表 述 了 你 的 想法 ， 解 决 了 一 些 细节 问题 ， 
设计 得 以 继续 进行 。 

干 得 漂亮 。 


9.3 ”让 框架 切实 可 行 
此 时 你 开始 创建 设计 框图 。 而 这 正 是 模式 资源 库 的 用 武之 地 。 
9.3.1 资源 库 


对 于 那些 有 多 个 设计 团队 ， 为 多 个 客户 工作 的 大 型 设计 公司 来 说 ， 和 框架 
和 模式 资源 库 无 疑 价值 千金 。 而 对 于 那些 把 所 有 时 间 都 放 在 自己 网 站 上 的 公司 
(或 组 织 ) 来 说 ， 组 件 资源 库 则 是 无 价 之 宝 。 这 些 资 源 有 助 于 我 们 做 计划 、 设 计 
内 容 、 举 行 白板 会 议 、 制 作 原型 ， 而 且 在 每 个 项 目的 一 开始 就 提供 了 可 重用 的 
共享 工具 组 和 共享 界面 解决 方案 语言 ， 便 于 我 们 不 停 试 验 。 如 果 你 是 这 类 型 组 
织 中 的 一 员 ， 我 们 强烈 建议 你 创建 一 套 与 产品 一 致 的 框架 和 模式 资源 库 ， 充 实 
并 具体 化 你 的 可 重用 策略 。 


但 如 果 你 是 一 位 独立 设计 师 又 会 发 生 什么 ? 当 一 位 设计 师 需要 把 这 些 元 素 
放 到 界面 里 ， 然 后 转化 成 真正 的 东西 一 一 不 管 是 在 一 家 小 公司 还 是 财富 500 强 
企业 ， 或 者 是 自己 当 顾问 一 一 你 怎样 才能 让 模式 变 得 切实 可 行 ? 

答案 不 止 一 种 。 

首先 ， 你 可 以 逐步 剥离 出 资源 库 文档 所 需要 的 那些 东西 。 不 必 在 一 开始 就 
一 口气 创建 一 个 既成 熟 又 完善 的 框架 资源 库 ， 你 可 以 效仿 Robert 的 做 法 
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他 用 37signals ”的 Backpack 账户 ”为 每 一 个 框架 都 创建 了 一 个 页 面 。 如 果 在 
项 目 中 出 现 了 新 的 框架 ， 他 会 在 Backpack 里 新 建 一 个 空白 页 面 ， 描 述 框架 
的 各 个 主要 部 分 ， 链 接 到 各 大 公共 模式 库 中 的 相应 模式 ， 或 者 对 照 他 自己 用 
OmniGraffle ”或 其 他 工具 建立 的 模板 〈 更 多 内 容 参见 下 一 节 )， 然 后 把 设计 标准 
列 出 来 。 随 着 时 间 的 推移 ， 他 构建 起 了 自己 的 个 人 资源 库 〈 参 见 图 9-1)， 到 如 
今 他 只 用 在 项 目 开 始 时 写 出 一 个 将 要 用 到 的 框架 列表 ， 就 能 随心 所 欲 地 调用 了 。 


其 次 ， 你 还 可 以 利用 模板 。 
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O 37signals 是 一 家 美国 私人 网 络 应 用 公司 ， 规 模 很 小 ， 主 要 创造 简单 和 功能 专 一 的 Web 应 
用 软件 ， 帮 助 用 户 协同 工作 和 组 织 团队 。 知 名 产品 包括 BaseCamp、Ta-Da List, Highrise, 
Backpack、Campfire 等 。 公 司 曾 被 连 线 杂 志 评 为 2008 年 十 大 最 值得 关注 创业 公司 之 一 。 网 
站 是 http://37signals.com。 

O BackPack 是 一 个 基于 Web 的 个 人 《或 小 型 企业 ) 信息 管理 系统 。 用 户 能 够 创建 页 面 (包括 
文本 、 图 片 、 文 件 、 代 办 事宜 、 笔 记 等 ) 和 日 历 并 共享 。 网 址 为 http://backpackit.com。 

@ OmniGraffle 是 the Omni Group 公司 的 产品 ， 现 已 发 布 至 第 5 个 版 本 。 它 是 一 款 流程 图 及 界 
面 原型 绘制 软件 ， 界 面 美观 ， 能 支持 Visio 文件 格式 。 但 只 适用 于 Mac 系统 。 网 址 为 http:// 


www.omnigroup.com/applications/omnigraffle. 


9.3 ”让 框架 切实 可 行 m 


9.3.2 ”模板 


在 我 们 写 这 本 书 的 过 程 中 ，Robert 有 关 框 架 的 讲座 、 会 议和 讨论 组 中 总 会 
有 人 提出 一 个 非常 实际 的 问题 ， 也 就 是 为 什么 一 个 (不 在 团队 中 工作 的 〉 独 立 
设计 师 需 要 建立 他 自己 的 框架 或 模式 资源 库 。 

这 个 问题 的 答案 稍微 有 些 复杂 。 


我 们 并 不 和 否认， 发 起 和 组 建 资源 库 是 一 项 非常 艰苦 的 工作 。 毫 无 疑问 ， 绝 
大 多 数 单枪匹马 的 设计 师 都 没有 充裕 的 时 间 来 创建 它们 。 而 且 就 算 这 位 设计 师 
属于 某 个 团队 ， 或 者 身 处 某 家 公司 ， 他 仍然 不 得 不 想方设法 让 这 些 资源 变 得 切 
实 可 行 ， 从 而 真正 帮助 他 把 界面 元 素 拼 合 起 来 。 


对 于 这 一 点 ， 我 们 的 疑问 是 : 你 愿意 自己 一 遍 又 一 遍地 设计 这 些 乏 味 的 联 
RRA? 还 有 那些 登录 界面 、 遗 失 密码 界面 或 者 标签 页 ? 不 管 你 用 什么 工具 
来 绘制 线 框 图 或 者 元 素 ， 如 果 能 把 它们 收集 起 来 作为 可 重用 的 模式 ， 无 疑 将 会 
带 来 极 大 的 帮助 。 让 我 们 来 看 看 模板 〈stencil)， 如 图 9-2 所 示 。 
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Robert 就 使 用 OmniGraffle 来 绘制 设计 框图 ， 这 是 一 个 被 很 多 人 用 来 创建 
自 定义 模板 的 工具 。 有 了 这 些 模板 ， 他 以 后 就 不 需要 再 重新 创建 这 些 元 素 了 。 


基本 上 ， 你 可 以 创建 一 个 模板 库 ， 里 面 放 上 那些 常见 的 表单 〈 不 过 是 你 自 
己 的 版 本 )， 例 如 注册 、 登 录 、 联 系 我 们 ， 等 等 ， 再 加 上 一 些 错误 处 理 设计 ， 例 
如 显示 合适 的 出 错 信息 等 。 当 你 日 后 要 用 到 其 中 的 某 个 表单 时 ， 只 需 把 它 调 出 
来 ， 适 当 调整 一 下 即 可 ， 而 不 用 每 次 都 从 头 开 始 。 通 过 这 种 方式 ， 模 式 能 发 挥 
更 大 的 作用 : 不 仅 有 助 于 最 初 的 项 目 规 划 ， 而 且 可 以 成 为 用 于 创建 真正 界面 的 
可 拖 放 解 决 方案 。 


对 于 设计 师 来 说 ， 如 果 你 认为 自己 某 次 的 表单 设计 很 成 功 ， 那 么 很 可 能 就 
会 一 直 延 用 这 种 设计 。 你 可 能 每 次 都 会 用 相似 的 方法 来 处 理 错误 信息 、 页 面 布 
局 、 输 入 栏 或 者 其 他 元 素 。 这 些 就 是 你 的 设计 模式 。 这 就 是 你 的 资源 库 。 你 不 
必 详 细 地 写 出 所 有 的 细节 《除非 需要 与 团队 其 他 成 员 共 享 )， 但 你 应 该 尽量 把 这 
些 设计 模式 转化 成 模板 ， 以 便 随时 重用 或 修改 。 这 确实 会 花 上 一 点 时 间 ， 但 是 
总 比 在 每 个 新 项 目 中 都 重新 创建 一 遍 这 些 内 容 要 好 得 多 。 


在 项 目 中 用 到 的 各 种 设计 工具 都 能 支持 你 的 可 重用 策略 。 使 用 那些 高 端的 
图 形 设计 工具 时 《例如 Adobe Photoshop )， 你 可 以 把 搜索 界面 的 所 有 图 层 都 复 
制 并 保存 为 一 个 新 的 图 像 文件 ， 以 便 日 后 在 其 他 设计 中 能 随时 重用 该 元 素 。 使 
用 线 框 图 工具 时 (例如 OmniGraffle 和 Microsoft Visio)， 你 可 以 创建 具有 你 自 
己 的 设计 模式 的 模板 。 而 普及 型 工具 方面 (例如 Apple Keynote 和 Microsoft 
PowerPoint)， 你 也 可 以 创建 包含 自 定义 形状 的 各 种 滑动 效果 ， 然 后 轻松 复制 到 
新 的 设计 中 去 。 


节省 在 这 些 “ 机 械 ” 的 元 素 上 所 耗费 的 时 间 ， 会 让 你 的 工作 少 一 些 单调 和 
乏味 ， 而 且 能 留 下 足够 的 时 间 去 关注 项 目 中 更 有 趣味 、 更 引人入胜 的 方面 。 


拥有 了 这 些 资源 之 后 ， 你 所 要 做 的 只 是 把 各 个 线 框图 拼凑 成 包含 这 些 框 架 
的 网 站 的 各 个 部 分 ， 把 它们 交 给 视觉 设计 师 ， 调 优 一 下 开发 人 员 完 成 的 最 终 页 
面 即 可 。 至 于 剩 下 的 大 把 时 间 ， 完 全 可 以 用 来 雕琢 主要 的 任务 流程 。 


而 这 才 是 你 的 客户 真正 关注 的 东西 。 
也 是 你 真正 关注 的 东西 。 


(D Keynote 是 苹果 公司 开发 的 演示 文稿 软件 ， 与 微软 的 PowerPoint 非常 类 似 。 不 过 与 
PowerPoint 不 同 的 是 ，Keynote 支持 几乎 所 有 的 图 片 字体 ， 界 面 和 设计 也 更 图 形 化 ， 效 果 更 
加 炫目 。 相 关 网 页 是 : http://www.apple.com/iwork/keynote o 
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刚 开 始 写 这 本 书 的 时 候 ， 我 们 打算 的 是 先 为 框架 做 一 个 简单 的 介绍 ， 然 后 
给 出 一 整套 常见 的 框架 实例 ， 并 逐一 进行 次 入 的 讨论 。 然 而 在 之 后 的 几 个 
月 时 间 内 ， 我 们 在 各 种 会 议和 讲座 中 不 停 地 谈论 框架 体系 ， 最 后 意识 到 两 件 
要 的 事情 。 


Iml 
pan 


第 一 ， 有 一 些 关 于 框架 的 问题 不 停 地 有 人 问 到 ， 它 们 需要 在 书 里 提出 并 解 
决 。 第 二 ， 给 你 一 整套 完成 后 的 框架 ， 我 们 实际 上 只 是 授 人 以 鱼 ， 而 非 授 人 以 
渔 。 远 比 这 重要 的 是 学 会 以 你 自己 的 方式 来 思考 、 辩 识 和 使 用 框架 ， 以 批判 的 
眼光 来 琢磨 ， 从 剖析 的 角度 来 解构 现 有 的 网 页 ， 并 把 由 此 获得 的 洞 见 应 用 到 实 
际 中 去 。 也 正 因 如 此 ， 我 们 修订 了 本 书 的 范围 和 结构 ， 变 成 了 你 手中 的 这 本 书 。 
我 们 相信 这 本 书 更 好 ， 而 且 会 为 你 带 来 更 多 、 更 长 远 的 利益 ， 远 超 我 们 一 开始 
所 设想 的 程度 。 


为 此 ， 我 们 确定 了 几 个 目标 。 


在 本 书 的 开篇 ， 我 们 近 距 离 地 观摩 了 Rolf Molich 称 之 为 “界面 模块 ”的 东 
西 。 我 们 相信 将 框架 体系 与 设计 模式 和 组 件 结合 使 用 ， 就 是 Rolf 当时 渴望 看 到 
的 景象 。 框 架 体系 指出 了 一 条 新 的 捷径 ， 帮 助 我 们 减少 对 可 用 性 评估 和 测试 的 
依赖 ， 从 而 直接 创造 出 更 可 用 的 界面 。 在 本 书 中 ， 我 们 力求 读者 不 仅 能 自行 辨 
识 这 些 界面 模块 ， 同 时 还 能 对 它们 进行 解构 和 分 析 。 


T 
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之 后 ， 我 们 帮助 你 如 何 将 原本 模糊 的 项 目 需求 更 好 地 转化 为 可 用 的 设计 。 
我 们 曾 目睹 过 无 数 项 目 由 于 规范 不 力 而 导致 最 后 产生 了 严重 的 偏差 ， 而 之 所 以 
要 大 力 提倡 框架 体系 ， 部 分 原因 正 是 因为 它 能 助 我 们 一 臂 之 力 ， 解 决 这 个 难题 。 


与 此 同时 ， 我 们 还 提出 了 一 些 只 靠 设 计 模式 无 法 实现 的 问题 一 一 如 何 获得 
灵感 ， 寻 求 创 新 之 路 。 我 们 利用 框架 进行 反 向 工程 ， 一 宕 那些 成 功 的 网 站 GX 
产品 ) 对 人 类 行为 的 挖掘 和 领悟 ， 并 为 每 一 个 框架 推断 出 一 系列 设计 标准 。 根 
据 这 些 标准 ， 我 们 将 会 设计 出 具有 高 度 可 用 性 及 创新 精神 的 解决 方案 。 


而 最 后 ， 或 许 也 是 最 重要 的 ， 我 们 希望 能 为 大 家 介绍 一 种 更 加 完善 的 可 重 
用 策略 。 无 疑 ， 模 式 和 组 件 能 够 帮助 团队 用 低 成 本 获得 高 回报 ， 但 这 还 远 远 不 
够 。 在 此 基础 上 ， 框 架 体系 引入 了 上 下 文 情境 ， 随 之 为 包含 了 完整 的 用 户 环境 
和 任务 流程 的 设计 提供 了 指导 方针 。 就 此 ， 三 者 相辅相成 ， 形 成 了 一 个 更 为 稳 
固 的 可 重用 策略 。 我 们 不 是 从 项 目的 理念 层面 直接 跳 向 (设计 模式 或 组 件 的 ) 
具体 细节 ， 而 是 利用 框架 来 跨越 这 二 者 之 间 的 鸿沟 ， 从 而 确保 我 们 的 设计 从 一 
开始 就 包含 了 正确 的 解决 方案 。 


上 述 这 些 目标 也 许 过 于 远大 ， 但 我 们 深信 : 框架 体系 能 够 用 切实 且 有 效 
的 方式 来 解决 所 有 问题 。 但 要 想 将 这 一 观点 论证 清楚 ， 还 需要 做 一 些 工 作 。 于 
是 在 本 书 中 ， 我 们 首先 在 一 定 深度 上 审视 了 模式 和 组 件 ， 随 即便 深入 到 框架 中 
去 一 一 它们 是 什么 ， 它 们 看 上 去 什么 样 ， 如 何 考虑 ， 如 何 记 录 ， 如 何 从 中 剥离 
出 设计 标准 并 应 用 ， 怎 样 筹备 并 共享 ， 怎 样 使 其 适应 我 们 的 工作 ， 怎 样 挑选 
《行业 内 外 ) 可 供 利 用 的 资源 站 点 来 验证 它们 。 另 外 在 最 后 ， 我 们 还 以 一 个 虚构 
的 案例 研究 演示 了 如 何 使 用 这 一 整套 体系 。 


除 此 之 外 ， 我 们 还 讨论 了 在 实现 设计 时 需要 考虑 的 事情 ， 以 及 如 何 让 设计 
更 具 说 服 力 ， 如 何 让 它们 可 用 。 我 们 还 解释 了 上 下 文 情 境 如 何 影响 你 的 设计 决 
定 。 


我 们 尽 自己 最 大 努力 ， 写 出 这 本 有 所 神 益 的 书 ， 自 然 也 希望 你 能 同意 : E 
作为 本 领域 内 的 论著 之 一 ， 描 述 已 然 颇 为 详尽 。 


但 其 实 我 们 还 有 一 件 事 尚未 涉及 : 如 何 劝 说 你 所 在 公司 (或 组 织 ) 的 投资 
者 们 相信 ， 开 发 框架 和 框架 资源 库 的 确 物 有 所 值 。 实 际 上 ， 有 很 多 人 都 问 过 我 
们 这 个 问题 一 一 人 们 总 是 想方设法 以 求 自己 在 设计 时 的 付出 能 够 获得 认同 
而 且 我 们 相信 ， 这 个 问题 的 答案 也 会 直接 影响 到 你 日 后 为 此 付出 的 努力 。 要 想 
让 未 来 更 加 美好 ， 首 先 得 认 清 当前 需要 解决 的 问题 。 
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而 要 想 对 他 们 说 明 这 些 问题 ， 有 一 个 很 好 的 办 法 ， 那 就 是 衡量 挫折 成 本 。 
10.1 挫折 成 本 


人 们 都 知道 ， 一 个 高 可 用 的 设计 无 疑 会 带 来 更 多 的 利益 ， 但 当 他 们 考虑 到 
其 他 的 业务 优先 级 时 ， 设 计 和 可 用 性 评估 所 需要 的 花费 总 是 被 挤 到 了 一 边 。 

不 良 的 设计 会 产生 摩擦 ， 而 摩擦 可 能 会 体现 在 各 个 方面 。 顾 客 可 能 会 放弃 
购买 商品 。 公 司职 员 可 能 要 花 更 多 时 间 来 处 理 无 关 紧 要 的 信息 。 设 计 与 用 户 目 
标 不 相符 的 地 方 越 多 ， 摩 擦 就 会 越 多 。 

当 产 生 摩 擦 时 ， 挫 折 感 便 随 之 出 现 。 用 户 会 因为 他 们 无 法 完成 任务 而 感到 
泪 来 。 老 板 会 因为 职员 执行 紧急 任务 的 时 间 过 长 而 感到 挫折 。 

不 良 的 设计 必然 带 来 高 摩擦 。 高 摩擦 必然 带 来 高 挫折 感 。 

虽然 说 有 时 我 们 很 难 判断 一 个 设计 是 否 不 良 ， 但 如 果 产 生 了 挫折 感 ， 衡 
就 有 了 依据 。 通 过 小 小 的 挖 气 ， 你 就 能 把 挫折 感 和 金钱 的 损失 联系 起 来 ， 这 
让 你 从 财政 方面 评估 不 良 设计 带 来 的 额外 成 本 。 


挫折 感 通常 体现 为 以 下 4 种 形式 : 


E 
里 
A 

能 


O 开支 的 增加 ; 

口 收入 的 减少 ; 

口 生产 力 的 降低 ; 
O 无 谓 的 开发 时 间 。 


如 果 因 为 某 个 设计 问题 ， 用 户 不 得 不 拨打 免费 客服 热线 ， 那 么 必然 会 迫使 
公司 雇佣 更 多 的 客服 人 员 。 与 此 类 似 ， 如 果 内 联网 的 设计 过 于 复杂 ， 那 么 员工 
将 不 得 不 把 工作 时 间 浪 费 在 那些 本 应 轻而易举 的 信息 采集 任务 上 面 。 


任何 公司 都 会 因为 财政 上 受到 的 影响 而 产生 挫折 感 。 你 可 以 把 公司 在 客服 
环节 投入 的 年 度 预算 除 以 接 到 的 电话 总 数 ， 以 此 计算 出 单 次 客服 电话 在 财政 上 
产生 的 成 本 。 


针对 某 个 具体 的 设计 问题 ， 你 可 以 佑 算出 与 它 相关 的 客服 电话 的 次 数 ， 然 
后 乘 以 “平均 单 次 电话 成 本 ” 最 后 得 出 这 个 问题 所 导致 的 开 文 。 如 果 此 时 提 
出 一 种 能 减少 挫折 感 的 替代 性 设计 方案 ， 那 么 你 就 能 佑 算出 两 者 间 的 成 本 差异 ， 
从 而 在 投资 回报 率 的 问题 上 拿 到 一 张 好 牌 。 
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1. Amtrak.com 的 挫折 成 本 


让 我 们 以 Amtrak.com “作为 一 个 例子 。 它 是 美国 铁路 客运 系统 的 官方 网 站 ， 
UIE 曾 于 2004 年 对 其 进行 过 研究 。 


《注意 : 以 下 描述 中 列举 的 数字 均 为 虚构 。) 


Amtrak.com 允许 顾客 在 线 订 票 。 通 过 可 用 性 测试 ， 我 们 发 现 该 网 站 的 订 票 
过 程 很 困难 。 每 4 次 在 线 订 票 的 尝试 中 ， 只 有 一 次 能 够 成 功 。 


对 该 网 站 日 志 的 分 析 显 示 ， 预 订 的 平均 票 价 为 220 美元 。 分 析 同 时 显示 每 
月 有 1 万 次 成 功 的 订 票 ， 因 此 这 一 块 的 月 收入 达到 了 220 万 美元 。 


观测 网 站 日 志和 我 们 在 UIE 实验 室 中 看 到 的 结果 相同 : 只 有 25% 的 用 户 最 
终 成功 订 票 。 这 意味 着 每 个 月 有 3 万 次 的 订 票 未 能 完成 。 使 用 之 前 的 平均 预订 
票 价 ， 那 么 每 个 月 未 能 完成 的 订 票 金额 应 该 是 660 万 美元 左右 ， 或 者 说 ， 每 年 
7920 万 美元 。 


对 Amtrak 来 说 ， 这 个 损失 可 是 很 大 一 笔 钱 。 但 是 在 这 些 未 完成 的 订 票 中 ， 
有 很 多 人 其 实 并 不 会 真正 订 票 ， 就 算 手 续 再 简单 也 一 样 。 网 站 的 设计 是 ， 哪 怕 
你 只 是 看 看 票 价 或 者 往返 时 刻 ， 也 必须 先进 入 订 票 流程 。 但 其 实 很 多 旅客 最 后 
选择 的 是 其 他 更 便宜 ， 或 者 更 方便 的 旅行 方式 ， 他 们 没有 真正 开始 订 票 就 离开 
了 。 


因此 ， 我 们 在 核算 挫折 成 本 时 必须 非常 小 心 ， 过 程 中 需要 排除 这 些 自发 终 
止 订 票 的 用 户 。 然 而 ， 我 们 发 现 很 难 准确 地 预测 这 种 类 型 的 访问 者 所 占 的 比例 ， 
只 能 进行 估算 。 在 本 案例 中 ， 我 们 的 估算 非常 保守 :只 保留 其 中 的 20% 当做 是 
真正 希望 订 票 的 人 ， 如 果 界 面 易 于 使 用 ， 他 们 将 完成 订 票 。( 估 计 越 保守 ， 越 能 
让 其 他 人 接受 我 们 的 估算 ， 同 时 也 留 下 了 余地 : 如 果实 际 情况 超出 了 我 们 的 目 
标 ， 将 会 带 来 额外 的 惊喜 。) 

每 月 有 3 万 的 订 票 未 能 完成 ， 而 其 中 的 20%， 即 6 千 人 会 因为 界面 的 改进 
而 完成 订 票 。 这 意味 着 如 果 有 一 个 设计 良好 的 订 票 系统 ， 每 个 月 将 会 增加 132 
万 美元 的 订 票 收入 ， 或 者 说 一 年 增加 1584 万 美元 。 


O Amtrak.com 即 国 家 铁路 客运 公司 (National Railroad Passenger Corporation， 常 用 商标 为 

Amtrak)， 是 美国 一 家 创立 于 1971 年 的 长 途 和 城 际 铁路 客运 公司 。Amtrak 是 一 个 组 合 字 ， 
| 美国 (American), KÆ (train) 和 铁轨 Crack) 组成。 该 公司 雇员 超过 19 000 人 ， 全 国 
总 路 线 长 达 35 000 公里 ， 服 务 46 个 州 约 500 个 地 点 ， 也 有 部 分 路 线 延 伸 至 加 拿 大 。2008 年 
共 服 务 超过 2 870 万 人 次 。 
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这 意味 着 ， 我 们 估算 出 Amtrak.com 的 挫折 成 本 几乎 达到 了 每 年 1600 万 美 
To 

这 样 的 计算 必 将 引起 某 些 人 的 关注 。 

2. 实际 核算 


为 了 计算 出 Amtrak 的 挫折 成 本 ， 我 们 需要 把 可 用 性 测试 的 结果 、 公 司 的 财 
务 活动 以 及 网 站 的 日 志文 件 都 结合 起 来 。 使 用 的 资料 来 源 越 多 ， 得 出 的 数据 就 
越 令 人 信服 。 


我 们 都 认为 挫折 感 会 导致 收益 的 降低 ， 而 且 往往 都 期 望 找 出 那些 对 销售 产 
影响 的 方面 。 然 而 ， 我 们 核算 挫折 成 本 时 也 需要 兼顾 那些 鳃 利之 外 的 方面 。 


e 开 文 的 增加 


我 们 要 看 到 因为 该 问题 而 招致 的 各 种 企业 开支 。 这 可 能 包括 额外 的 电话 客 
服 、 原 材料 的 蔡 换 或 者 服务 天 负载 的 增加 。 


e 生产 力 的 降低 


这 方面 稍微 有 些 难于 估算。 在 理想 情况 下 ， 你 可 以 先 计 算出 相关 员工 每 
年 需要 的 成 本 ， 然 后 除 以 他 们 一 年 中 工作 的 小 时 数 ， 以 此 得 到 一 位 高 产 员工 的 
“一 小 时 成 本 ”。 把 它 乘 以 这 一 年 中 “ 非 生产 性 ”的 小 时 数 ， 你 就 能 得 到 每 年 生 
产 力 降 低 的 数字 。 


不 过 ， 有 时 候 很 难 计 算出 相关 员工 需要 的 成 本 。 查 算 人 们 的 薪酬 、 福 利和 
其 他 成 本 例如 他 们 导致 的 电费 ) 会 占用 大 量 时 间 ， 而 且 可 能 有 悖 法 规 。 但 如 
果 我 们 关注 的 不 是 生产 力 的 损失 ， 而 是 这 些 员 工 将 会 做 出 什么 成 绩 ， 也 许 会 更 
加 容易 一 些 。 比 如 ， 我 们 可 以 谈论 如 何 让 销售 人 员 多 出 15% 的 时 间 用 于 本 职工 
作 ， 这 样 就 能 从 获得 更 多 生产 力 的 方面 来 表现 挫折 成 本 。 


e 无 谓 的 开发 时 间 


在 当今 的 许多 软件 产品 和 网 站 中 ， 有 一 些 是 用 户 从 未 发 现 或 使 用 过 的 功能 
区 域 。( 随 便 找 一 个 文字 处 理 软 件 ， 你 只 需 展 开 菜 单 ， 就 会 发 现 有 大 量 的 条 目 
自己 根本 从 未 涉及 。) 开发 这 些 功 能 和 特性 需要 时 间 ， 但 如 果 没 人 知道 它们 在 那 
里 ， 软 件 的 发 布 者 又 能 得 到 什么 好 处 呢 ? 


检查 一 下 计划 开发 的 功能 列表 ， 我 们 就 能 得 知 其 中 各 项 的 开发 成 本 使 用 
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与 生产 力 降 低 相 类 似 的 算法 )。 相 关 的 简单 可 用 性 测试 可 以 帮助 我 们 检验 这 些 功 
能 是 否 能 被 用 户 发 现 ， 以 及 发 现 后 是 否 会 使 用 。 换 名 话说， 我 们 能 够 计算 出 开 
发 人 员 在 构建 根本 无 用 的 东西 时 所 浪费 的 成 本 。 

3. 寻找 痛苦 

即使 已 经 反复 核算 了 挫折 成 本 ， 所 有 资料 都 了 然 于 胸 ， 但 要 想 直 接 问 进 


CEO 的 办 公 室 ， 拍 胸 腿 说 靠 可 用 性 就 能 为 公司 省 下 几 百 万 美元 ， 可 能 仍然 颇 有 
难度 。 你 还 需要 去 下 一 个 好 地 方 : Be. 


通常 在 一 个 公司 里 ， 哪 里 有 挫折 感 ， 哪 里 就 有 痛 苗 。 总 有 些 人 得 不 到 他 们 
想 要 的 。 如 果 网 站 很 难 使 用 ， 妨 碍 了 人 们 购物 ， 那 么 销售 和 市 场 部 门 就 完 不 成 
预定 目标 。 如 果 客 服 电话 老 是 啊 个 不 停 ， 客 服 中 心 的 经 理 就 会 因为 人 手 不 足 而 
烦恼 。 

通过 寻找 痛苦 的 来 源 ， 你 往往 能 发 现 重要 的 盟友 ， 说 不 定 其 中 某 些 人 还 能 
为 你 的 可 用 性 拨 出 预算 资金 。 最 起 码 ， 身 边 多 一 个 拥护 者 也 是 非常 有 益 的 。 

4. 利用 挫折 成 本 

核算 挫折 成 本 是 UTE 最 喜欢 使 用 的 一 种 展示 其 工作 价值 的 方法 。 如 果 团 队 
能 够 准确 地 描述 出 界面 如 何 令 人 感到 挫折 ， 以 及 这 种 挫折 会 如 何 影 响 业 务 ， 那 
么 劝说 股东 改变 他 们 的 设计 将 会 非常 容易 。 

UE 的 团队 成 员 们 发 现 ， 只 要 聚焦 于 最 底层 的 挫折 成 本 ， 就 能 掌握 一 套 有 
效 的 度量 方法 ， 得 以 在 整个 开发 过 程 中 使 用 。 这 有 助 于 他 们 找到 那些 最 为 有 效 
的 设计 ， 同 时 也 便于 他 们 说 明 优秀 设计 所 能 带 来 的 好 处 。 


我 们 希望 这 个 方法 对 你 也 能 有 所 帮助 。 


10.2 资源 


最 后 ， 我 们 为 你 提供 有 关 模 式 、 组 件 和 框架 体系 的 一 系列 资源 。 我 们 的 确 
非常 希望 你 每 天 都 能 把 本 书 放 在 手边 ， 随 时 取 用 ， 但 我 们 也 理解 如 果 有 更 多 的 
资源 ， 必 将 让 你 获得 更 多 的 益处 。 以 下 是 一 系列 我 们 认为 有 助 于 你 上 手 ， 并 在 
工作 中 为 你 的 框架 提供 支持 的 资源 。 


A “Web Anatomy: Introducing Interaction Design Frameworks” C 网 页 解剖 
学 : 交互 设计 框架 体系 引 论 ) : Robert 为 UIE.com 所 写 的 介绍 性 文章 ， 


10.2 资源 


它 可 以 帮助 你 总 结 框架 体系 的 概念 ， 并 理解 它 如 何 让 设计 师 受益 。 网 址 
是 http://www.uie.com/articles/web_anatomy_frameworks/. 

O “Web Anatomy: Effective Interaction Design with Frameworks”( 网 页 解剖 
学 : 框架 化 的 高 效 交 互 设 计 ) : Robert 有 关 框 架 的 在 线 讲座 ， 长 度 为 90 
分 钟 ， 提 供 了 框架 体系 的 介绍 ， 并 且 附 带 有 与 会 者 的 问答 环节 ”。 

口 Spoolcast: Interaction Design Frameworks Seminar Q&A Follow-up (Spool 
播客 : 交互 设计 框架 讲座 后 续 问 答 环节 ) : Robert 在 此 回答 了 上 述 在 
线 框架 讲座 的 与 会 者 们 提出 的 更 多 问题 。 网 址 是 ittp://www.uie.com/ 
brainsparks/2009/06/03/spoolcast-interaction-design-frameworks-seminar- 


qa-fo llow-up/. 


当然 ， 还 有 一 个 极 有 价值 的 资源 : 第 一 个 公共 可 用 的 框架 体系 资源 库 ， 就 
在 http://webanatomy.rhjr.net E o 


如 果 连 这 些 资源 都 无 法 帮助 你 解决 问题 ， 可 以 直接 联系 Robert Hoekman, 
Jr，( 个 人 网 站 www.rhjr.net) 或 者 Jared Spool (公司 网 站 www.uie.com). 


O 网 址 是 http://www.uie.com/brainsparks/2009/05/ 13/web-anatomy-effective-interaction-design-with- 
frameworks/. 
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